:root {
  --paper: #e8e6da;
  --ink: #121713;
  --pine: #263c2f;
  --seal: #9a3d2e;
  --mist: rgba(232, 230, 218, .58);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #090e0b; }
body { color: var(--paper); font-family: "Songti SC", "Noto Serif CJK SC", STSong, serif; overflow: hidden; }
button, a { color: inherit; font: inherit; }

.world { position: relative; width: 100vw; height: 100svh; overflow: hidden; isolation: isolate; background: #0b120e; }
#ink-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: saturate(.68) contrast(1.04); opacity: .72; transition: opacity 1.8s ease, filter 1.8s ease; }
.world.entered #ink-canvas { opacity: 1; filter: saturate(.82) contrast(1.02); }

.paper-grain { position: absolute; inset: -40%; z-index: 2; pointer-events: none; opacity: .1; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E"); animation: grain .4s steps(2) infinite; }
.ink-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 45%, transparent 25%, rgba(6,11,8,.18) 58%, rgba(3,7,5,.85) 120%), linear-gradient(180deg, rgba(3,7,5,.56), transparent 28%, transparent 72%, rgba(3,7,5,.62)); }

.museum-nav { position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 34px; border-bottom: 1px solid rgba(232,230,218,.14); letter-spacing: .18em; font-size: 10px; }
.museum-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.museum-mark span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 4px; background: var(--seal); color: #efe8d3; font-size: 17px; box-shadow: 0 4px 22px rgba(154,61,46,.25); }
.museum-mark b { font-weight: 400; }
.museum-nav p { margin: 0; color: rgba(232,230,218,.56); }
.museum-nav button { justify-self: end; border: 1px solid rgba(232,230,218,.24); border-radius: 99px; background: rgba(8,15,10,.18); padding: 9px 14px; cursor: pointer; font-size: 9px; letter-spacing: .14em; }

.portal { position: absolute; z-index: 4; left: 9vw; top: 50%; transform: translateY(-48%); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.16,.8,.2,1); }
.portal-kicker { margin: 0 0 23px; color: #cfb870; letter-spacing: .28em; font: 9px/1.4 Arial, sans-serif; }
.portal h1 { margin: 0; font-size: clamp(64px, 10vw, 148px); font-weight: 400; line-height: .82; letter-spacing: -.1em; text-shadow: 0 8px 45px rgba(0,0,0,.45); writing-mode: horizontal-tb; }
.portal h1 span { display: block; margin-left: -.28em; color: rgba(232,230,218,.23); font-size: .44em; letter-spacing: .26em; }
.portal-copy { margin: 36px 0 34px 4px; color: rgba(232,230,218,.68); font-size: 13px; line-height: 2; letter-spacing: .14em; }
.enter-world { position: relative; display: flex; align-items: center; gap: 30px; border: 1px solid rgba(232,230,218,.34); background: rgba(12,20,14,.22); padding: 14px 16px 14px 24px; cursor: pointer; letter-spacing: .5em; backdrop-filter: blur(10px); transition: transform .3s, border-color .3s, background .3s; }
.enter-world:hover { transform: translateY(-3px); border-color: #cfb870; background: rgba(207,184,112,.1); }
.enter-world i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--seal); font-style: normal; letter-spacing: 0; }
.world.entered .portal { opacity: 0; transform: translate(-44px,-48%); pointer-events: none; }

.world-loader { position: absolute; inset: 0; z-index: 10; display: none; place-content: center; justify-items: center; background: #e7e4d8; color: #182019; transition: opacity 1.1s ease; }
.world-loader.visible { display: grid; }.world-loader.done { opacity: 0; pointer-events: none; }
.ink-drop { width: 54px; height: 54px; background: #172018; border-radius: 50% 50% 52% 48%; filter: blur(1px); box-shadow: 0 0 0 11px rgba(23,32,24,.06), 0 0 50px rgba(23,32,24,.25); animation: breathe 1.6s ease-in-out infinite alternate; }
.world-loader p { margin: 24px 0 13px; letter-spacing: .42em; font-size: 11px; }
.world-loader > span { width: 180px; height: 1px; background: rgba(23,32,24,.16); }.world-loader > span i { display: block; height: 100%; width: 0; background: var(--seal); transition: width .2s; }
.world-loader small { margin-top: 10px; font: 9px Arial, sans-serif; color: rgba(23,32,24,.55); }

.chapter-card { position: absolute; z-index: 4; left: 34px; top: 50%; display: flex; gap: 18px; max-width: 360px; opacity: 0; transform: translateY(-20%); pointer-events: none; transition: opacity .8s, transform .8s; }
.world.entered .chapter-card.visible { opacity: 1; transform: translateY(-50%); }
.chapter-card > span { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; background: var(--seal); border-radius: 3px; margin-top: 2px; }
.chapter-card p { margin: 0; color: rgba(232,230,218,.56); font: 9px/1.8 Arial, sans-serif; letter-spacing: .18em; }
.chapter-card h2 { margin: 5px 0 8px; font-size: 22px; font-weight: 400; letter-spacing: .13em; }
.chapter-card #chapter-copy { font: 12px/1.8 "Songti SC", STSong, serif; letter-spacing: .08em; }

.art-note { position: absolute; z-index: 7; right: 28px; top: 50%; width: min(390px, calc(100vw - 40px)); padding: 36px; color: var(--ink); background: rgba(235,232,220,.94); backdrop-filter: blur(18px); border-radius: 3px; box-shadow: 0 24px 80px rgba(0,0,0,.36); opacity: 0; transform: translate(30px,-50%); pointer-events: none; transition: opacity .5s, transform .5s; }
.art-note.open { opacity: 1; transform: translate(0,-50%); pointer-events: auto; }
.art-note button { position: absolute; right: 15px; top: 12px; border: 0; background: none; cursor: pointer; font-size: 24px; color: rgba(18,23,19,.45); }
.art-note > p { margin: 0 0 10px; color: var(--seal); font: 9px Arial, sans-serif; letter-spacing: .2em; }
.art-note h2 { margin: 0; font-size: 27px; font-weight: 400; }
.art-note blockquote { margin: 25px 0; padding-left: 17px; border-left: 2px solid var(--seal); color: rgba(18,23,19,.68); line-height: 1.8; }
.art-note dl { margin: 0 0 24px; border-top: 1px solid rgba(18,23,19,.13); }
.art-note dl div { display: flex; border-bottom: 1px solid rgba(18,23,19,.1); padding: 10px 0; font-size: 12px; }
.art-note dt { width: 70px; color: rgba(18,23,19,.45); }.art-note dd { margin: 0; }
.art-note a { color: var(--seal); font-size: 12px; text-decoration: none; border-bottom: 1px solid rgba(154,61,46,.32); }

.crosshair { position: absolute; z-index: 4; left: 50%; top: 50%; width: 21px; height: 21px; opacity: 0; transition: opacity 1s 1s; pointer-events: none; }
.world.entered .crosshair { opacity: .7; }
.crosshair i { position: absolute; background: var(--paper); }.crosshair i:first-child { width: 1px; height: 21px; left: 10px; }.crosshair i:last-child { width: 21px; height: 1px; top: 10px; }

.world-footer { position: absolute; z-index: 4; left: 34px; right: 34px; bottom: 23px; display: flex; justify-content: space-between; color: rgba(232,230,218,.44); font: 9px Arial, sans-serif; letter-spacing: .14em; transition: opacity .6s; }
.world:not(.entered) .world-footer p:first-child { opacity: 0; }
kbd { color: rgba(232,230,218,.82); font: inherit; }

@keyframes grain { 0% { transform: translate(0); } 33% { transform: translate(2%,-3%); } 66% { transform: translate(-3%,2%); } 100% { transform: translate(1%,3%); } }
@keyframes breathe { to { transform: scale(.86); filter: blur(3px); } }

@media (max-width: 720px) {
  .museum-nav { height: 70px; grid-template-columns: 1fr auto; padding: 0 18px; }.museum-nav > p { display: none; }.museum-mark b { display: none; }
  .portal { left: 25px; right: 20px; }.portal h1 { font-size: 21vw; }.portal h1 span { margin-left: 0; }.portal-copy { font-size: 11px; }
  .chapter-card { left: 18px; top: auto; bottom: 72px; max-width: calc(100vw - 36px); transform: translateY(10px); }.world.entered .chapter-card.visible { transform: translateY(0); }
  .art-note { right: 20px; top: auto; bottom: 20px; transform: translateY(30px); }.art-note.open { transform: none; }
  .world-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}