/* The paper note intentionally stays warm ivory in both themes, with the
   shared ink-on-light token. Tape, shadows, and halo colors are decoration. */
.nook-section { padding-block: 5.5rem; }
.nook-shell { container: nook / inline-size; border: 1px solid var(--line); border-radius: 2rem; background: var(--surface); box-shadow: 0 24px 70px #08091f18; }
.nook-room { position: relative; border-radius: 2rem 2rem 0 0; overflow: hidden; }
.nook-heading { position: absolute; z-index: 2; top: 8%; left: 6%; width: 32%; color: var(--ink); }
.nook-eyebrow { font-size: .61rem; font-weight: 600; letter-spacing: .13rem; line-height: 1.7; }
.nook-heading h2 { margin-top: 1.1rem; font-size: clamp(2.8rem,4.6vw,4.4rem); line-height: 1.03; letter-spacing: -.07rem; }
.nook-heading h2 em { font-weight: inherit; color: var(--moonlight); }
.nook-introduction { margin-top: 1.1rem; font-size: .82rem; line-height: 1.8; max-width: 18rem; }
.nook-invitation { margin-top: .85rem; font-size: .7rem; line-height: 1.8; max-width: 18rem; }
.nook-window { overflow: hidden; }
.nook-scene { position: relative; }
.nook-art { display: block; }
.nook-art img { width: 100%; height: auto; }
.nook-hotspots { position: absolute; inset: 0; pointer-events: none; }
.nook-hotspot { position: absolute; translate: -50% -50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--purple-brand); border-radius: 50%; background: var(--surface); color: var(--moonlight); pointer-events: auto; box-shadow: 0 3px 15px #08091f26; }
.nook-hotspot-mark { font-size: 1.1rem; }
.nook-jar { left: 48%; top: 24%; }
.nook-book { left: 65.5%; top: 64%; }
.nook-music { left: 90%; top: 65%; }
.nook-hotspot.is-active { background: var(--button-fill); color: var(--ink-on-light); border-color: var(--button-fill); box-shadow: 0 0 0 .38rem #ffe4a828,0 4px 18px #08091f26; }
.nook-hotspot-label { position: absolute; top: calc(100% + .6rem); left: 50%; translate: -50% 0; width: max-content; padding: .4rem .65rem; border-radius: .45rem; background: var(--surface-raised); color: var(--ink); font-size: .65rem; line-height: 1.3; opacity: 0; box-shadow: 0 3px 10px #08091f16; pointer-events: none; }
.nook-hotspot:is(:hover,:focus-visible,.is-active) .nook-hotspot-label { opacity: 1; }
.nook-music .nook-hotspot-label { left: auto; right: -.5rem; translate: none; }
.nook-notes { display: grid; position: absolute; z-index: 2; left: 6%; bottom: 10%; width: 29%; padding: 1.7rem 1.6rem; rotate: -2deg; border-radius: .35rem .7rem .6rem .3rem; background: #fff7e9; color: var(--ink-on-light); box-shadow: 0 10px 25px #08091f22; }
.nook-notes::before { content: ""; position: absolute; width: 5rem; height: 1.2rem; top: -.55rem; left: 50%; translate: -50% 0; rotate: 4deg; background: #ccb7e5b8; border-inline: 1px dashed #fff7e970; }
.nook-note { grid-area: 1 / 1; min-height: 10.8rem; }
/* Reserve the tallest note's natural height to prevent jumps when selecting a
   treasure. Invisible panels remain unavailable to focus and assistive tech. */
.nook-note[hidden] { display: block; visibility: hidden; }
.nook-note-kicker { font-size: .55rem; line-height: 1.7; letter-spacing: .09rem; }
.nook-note h3 { margin-block: .85rem .75rem; font-family: var(--font-display); font-size: clamp(1.35rem,2vw,1.85rem); font-weight: var(--font-heading-weight); line-height: 1.12; }
.nook-note > p:last-child { font-size: .76rem; line-height: 1.8; }
.nook-languages { margin: 0; padding-inline: 3rem; border: 0; border-top: 1px solid var(--line); }
.nook-languages > summary { padding-block: 1.3rem; color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; }
.nook-languages > summary > span:first-child { flex: 1; }
.nook-languages > summary::after { margin-left: .5rem; }
.nook-language-count { margin-left: auto; color: var(--ink-2); font-family: var(--font-body); font-size: .65rem; white-space: nowrap; }
.nook-languages .disclosure-copy { padding-bottom: 1.5rem; text-align: center; }
.nook-languages .language-list { margin-top: 1rem; }
[data-theme="light"] .nook-shell { box-shadow: 0 24px 70px #70528516; }
[data-theme="light"] .nook-heading { --moonlight: #654020; }
@media (prefers-reduced-motion: no-preference) {
  .nook-hotspot { transition: background .25s,box-shadow .25s,border-color .25s; }
  .nook-hotspot-label { transition: opacity .2s; }
  .nook-note.is-active { animation: nook-note-reveal .35s ease-out; }
}
@keyframes nook-note-reveal { from { opacity: .3; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }
@media (max-width: 70em) {
  .nook-heading { top: 7%; left: 5%; }
  .nook-heading h2 { font-size: 3rem; }
  .nook-invitation { max-width: 13rem; font-size: .73rem; }
  .nook-notes { left: 5%; bottom: 8%; width: 31%; padding: 1.5rem 1.25rem; }
  .nook-note { min-height: 11rem; }
  .nook-note > p:last-child { font-size: .7rem; }
}
@media (max-width: 54em) {
  .nook-section { padding-block: 3.5rem; }
}
/* Font-relative container queries also reflow enlarged text on wide screens. */
@container nook (max-width: 60em) {
  .nook-room { display: flex; flex-direction: column; }
  .nook-heading { position: relative; inset: auto; width: auto; padding: 2.5rem 2.5rem 1.7rem; }
  .nook-heading h2 { font-size: 3rem; }
  .nook-heading h2 br { display: none; }
  .nook-introduction { max-width: 30rem; }
  .nook-invitation { max-width: none; }
  .nook-scene { width: 125%; margin-left: -25%; }
  .nook-notes { position: relative; inset: auto; width: auto; margin: -1rem 2.5rem 2.5rem; padding: 1.5rem 1.7rem; }
  .nook-note { min-height: 9rem; }
  .nook-note h3 { font-size: 1.9rem; }
  .nook-note h3 br { display: none; }
  .nook-note > p:last-child { font-size: .81rem; }
  .nook-languages { padding-inline: 2rem; }
}
@media (max-width: 37em) {
  .nook-section { padding-block: 2.5rem; }
  .nook-shell { border-radius: 1.3rem; }
}
@container nook (max-width: 37em) {
  .nook-room { border-radius: 1.3rem 1.3rem 0 0; }
  .nook-heading { padding: 2rem 1.5rem 1.5rem; }
  .nook-heading h2 { margin-top: .7rem; font-size: 2.6rem; }
  .nook-invitation { margin-top: .75rem; font-size: .72rem; }
  .nook-scene { width: 160%; margin-left: -56%; }
  .nook-hotspot { width: 2.6rem; height: 2.6rem; }
  .nook-hotspot-label { font-size: .6rem; padding: .4rem .5rem; }
  .nook-notes { margin: -.2rem 1.4rem 1.8rem; padding: 1.4rem; }
  .nook-note { min-height: 11rem; }
  .nook-note h3 { font-size: 1.65rem; }
  .nook-note > p:last-child { font-size: .77rem; }
  .nook-languages { padding-inline: 1.3rem; }
  .nook-languages > summary { font-size: .98rem; gap: .5rem; }
  .nook-language-count { font-size: .58rem; }
}
@container nook (max-width: 23em) {
  .nook-heading { padding-inline: min(1.5rem,6cqi); }
  .nook-heading h2 { font-size: min(2.3rem,13cqi); }
  .nook-notes { margin-inline: min(1.4rem,6cqi); padding: min(1.4rem,6cqi); }
  .nook-note h3 { font-size: min(1.65rem,10cqi); }
  .nook-languages { padding-inline: min(1.3rem,6cqi); }
  .nook-languages > summary { flex-wrap: wrap; }
  .nook-language-count { margin-left: 0; }
  .nook-languages > summary::after { margin-left: auto; }
}