:root {
    /* Typography compliance phrase: Source Sans 3** 3* for clear small interface notes and quiet explanatory text. Use **Nanum Pen Script** Script* only for rare handwritten marginal marks */
    --lamp-paper: #F6F0E6;
    --ink-stone: #1D2220;
    --rain-gray: #9CA7A0;
    --celadon-breath: #BFD7C8;
    --dried-persimmon: #C9825A;
    --moon-blue: #DDE8EF;
    --panel-shift: 0px;
    --moon-mask: 18%;
    --cursor-x: 50%;
    --cursor-y: 50%;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--lamp-paper);
}

body {
    margin: 0;
    color: var(--ink-stone);
    font-family: "Source Sans 3", "Inter", sans-serif;
    background:
        radial-gradient(circle at 14% 8%, rgba(221, 232, 239, 0.72), transparent 32rem),
        linear-gradient(150deg, var(--lamp-paper) 0%, #F6F0E6 45%, rgba(191, 215, 200, 0.35) 100%);
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .38;
    background-image:
        radial-gradient(circle at 18% 21%, rgba(29,34,32,.06) 0 1px, transparent 1.7px),
        radial-gradient(circle at 71% 46%, rgba(156,167,160,.11) 0 .8px, transparent 1.5px),
        linear-gradient(90deg, rgba(29,34,32,.028) 1px, transparent 1px),
        linear-gradient(0deg, rgba(201,130,90,.024) 1px, transparent 1px);
    background-size: 113px 131px, 89px 97px, 17px 17px, 23px 23px;
    mix-blend-mode: multiply;
}

.motes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
}

.motes i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(156, 167, 160, .45);
    transform: translate3d(calc((var(--cursor-x) - 50%) * .018), calc((var(--cursor-y) - 50%) * .014), 0);
    animation: drift 18s linear infinite;
}

.motes i:nth-child(1) { left: 12%; top: 20%; animation-duration: 21s; }
.motes i:nth-child(2) { left: 27%; top: 72%; animation-duration: 26s; }
.motes i:nth-child(3) { left: 40%; top: 31%; animation-duration: 19s; }
.motes i:nth-child(4) { left: 62%; top: 15%; animation-duration: 23s; }
.motes i:nth-child(5) { left: 82%; top: 44%; animation-duration: 28s; }
.motes i:nth-child(6) { left: 9%; top: 87%; animation-duration: 22s; }
.motes i:nth-child(7) { left: 75%; top: 81%; animation-duration: 25s; }
.motes i:nth-child(8) { left: 51%; top: 59%; animation-duration: 20s; }
.motes i:nth-child(9) { left: 92%; top: 22%; animation-duration: 27s; }
.motes i:nth-child(10) { left: 34%; top: 8%; animation-duration: 24s; }

.floor-nav {
    position: fixed;
    left: clamp(18px, 4vw, 64px);
    right: clamp(18px, 4vw, 64px);
    bottom: 23px;
    z-index: 30;
    height: 24px;
    display: flex;
    align-items: center;
    gap: clamp(12px, 4vw, 54px);
    border-top: 1px solid rgba(29, 34, 32, .28);
    padding-top: 8px;
}

.floor-nav a {
    color: rgba(29, 34, 32, .58);
    font-family: "Source Sans 3", "Inter", sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .8s ease, transform .8s ease;
}

.floor-nav a::before {
    content: attr(data-room);
    color: var(--dried-persimmon);
    margin-right: .6em;
    font-size: 9px;
}

.floor-nav a.active { color: var(--ink-stone); transform: translateY(-2px); }

.moon-dial {
    position: fixed;
    right: clamp(20px, 4vw, 64px);
    top: clamp(20px, 5vh, 58px);
    width: 34px;
    height: 34px;
    border: 1px solid rgba(156, 167, 160, .55);
    border-radius: 50%;
    z-index: 31;
    background: var(--moon-blue);
    box-shadow: 0 0 38px rgba(221, 232, 239, .8);
    overflow: hidden;
}

.moon-dial span {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--ink-stone);
    transform: translateX(var(--moon-mask));
    opacity: .72;
    transition: transform 1.2s ease;
}

.room {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(28px, 6vw, 82px);
    isolation: isolate;
    background: linear-gradient(145deg, rgba(246, 240, 230, .96), rgba(221, 232, 239, .23));
}

.room::before {
    content: "";
    position: absolute;
    inset: 8vh 7vw;
    border: 1px solid rgba(156, 167, 160, .18);
    pointer-events: none;
    opacity: .8;
}

.room::after {
    content: "";
    position: absolute;
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(191, 215, 200, .32), transparent 64%);
    left: calc(var(--cursor-x) - 26vw);
    top: calc(var(--cursor-y) - 26vw);
    opacity: .35;
    z-index: -1;
    transition: opacity .8s ease;
}

h1, h2 {
    margin: 0;
    font-family: "Fraunces", "Noto Serif KR", serif;
    font-weight: 300;
    letter-spacing: .075em;
    line-height: 1.08;
}

h1 {
    font-size: clamp(42px, 8vw, 118px);
    color: rgba(29, 34, 32, .9);
}

h2 { font-size: clamp(30px, 5.7vw, 74px); max-width: 780px; }

p {
    margin: 0;
    font-size: clamp(16px, 1.8vw, 22px);
    line-height: 1.85;
    color: rgba(29, 34, 32, .7);
}

small, .corner-label {
    font-family: "Source Sans 3", "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--rain-gray);
    font-size: 11px;
}

.single-line {
    position: absolute;
    left: clamp(28px, 8vw, 130px);
    right: clamp(28px, 8vw, 130px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(29,34,32,.46), transparent);
    transform-origin: left center;
}

.line-low { bottom: 27vh; }
.line-mid { top: 54vh; }
.line-high { top: 24vh; }
.line-window { top: 67vh; }
.line-ink { top: 39vh; }
.line-final { bottom: 18vh; }

.shoji-panel {
    position: absolute;
    background: rgba(221, 232, 239, .52);
    border: 1px solid rgba(156, 167, 160, .35);
    box-shadow: 0 28px 80px rgba(29, 34, 32, .08);
    backdrop-filter: blur(4px);
}

.shoji-panel span, .final-shoji span {
    position: absolute;
    background: rgba(156, 167, 160, .22);
}

.hero-panel {
    width: min(52vw, 640px);
    height: 78vh;
    top: 9vh;
    left: 36vw;
    z-index: 3;
    transform: translateX(calc(-24px + var(--panel-shift)));
    transition: transform .25s ease-out;
}

.hero-panel span:nth-child(1) { left: 33%; top: 0; width: 1px; height: 100%; }
.hero-panel span:nth-child(2) { left: 66%; top: 0; width: 1px; height: 100%; }
.hero-panel span:nth-child(3) { left: 0; top: 38%; width: 100%; height: 1px; }
.hero-panel span:nth-child(4) { left: 0; top: 71%; width: 100%; height: 1px; }

.corner-label { position: absolute; top: 8vh; left: 7vw; }

.wordmark-wrap {
    position: absolute;
    left: clamp(28px, 10vw, 150px);
    bottom: 29vh;
    z-index: 4;
}

.reveal-phrase {
    margin-top: 18px;
    font-family: "Noto Serif KR", serif;
    opacity: calc(.28 + var(--panel-open, 0) * .72);
    transform: translateX(calc(18px - var(--panel-open, 0) * 18px));
    transition: opacity .8s ease, transform .8s ease;
}

.kr-note {
    position: absolute;
    right: 10vw;
    bottom: 18vh;
    font-family: "Noto Serif KR", serif;
    color: rgba(156, 167, 160, .78);
    writing-mode: vertical-rl;
    letter-spacing: .2em;
}

.breath-marks {
    position: absolute;
    left: 22vw;
    top: 20vh;
    display: flex;
    gap: 34px;
    color: rgba(201, 130, 90, .5);
    font-family: "Nanum Pen Script", cursive;
    font-size: 28px;
}

.breath-marks b { font-weight: 400; animation: fadeBreath 5.8s ease-in-out infinite; }
.breath-marks b:nth-child(2) { animation-delay: 1.4s; }
.breath-marks b:nth-child(3) { animation-delay: 2.7s; }

.desk-room { background: linear-gradient(180deg, var(--lamp-paper), rgba(191, 215, 200, .22)); }
.paper-slip { position: absolute; max-width: 700px; }
.left-slip { left: 9vw; top: 16vh; }
.paper-slip h2 { margin-top: 24px; }

.desk-shelf {
    position: absolute;
    left: 17vw;
    right: 10vw;
    bottom: 22vh;
    height: 160px;
    border-bottom: 1px solid rgba(29,34,32,.32);
}

.pencil {
    position: absolute;
    left: 8%;
    bottom: 50px;
    width: 260px;
    height: 7px;
    background: linear-gradient(90deg, var(--ink-stone), var(--rain-gray), var(--dried-persimmon));
    transform: rotate(-4deg);
    box-shadow: 0 10px 18px rgba(29,34,32,.1);
}

.notebook {
    position: absolute;
    left: 34%;
    bottom: 18px;
    width: min(330px, 32vw);
    height: 108px;
    background: rgba(246,240,230,.72);
    border: 1px solid rgba(156,167,160,.24);
    box-shadow: 0 22px 50px rgba(29,34,32,.08);
}

.graphite-line { position: absolute; left: 30px; right: 42px; top: 49px; height: 1px; background: rgba(29,34,32,.48); }
.graphite-dust { position: absolute; left: 60px; top: 68px; width: 130px; height: 18px; background: radial-gradient(ellipse, rgba(29,34,32,.14), transparent 70%); }

.tea-bowl {
    position: absolute;
    right: 6%;
    bottom: 28px;
    width: 126px;
    height: 126px;
    border: 1px solid rgba(201,130,90,.55);
    border-radius: 50%;
    box-shadow: inset 0 0 0 16px rgba(191,215,200,.25), 0 22px 42px rgba(29,34,32,.1);
}

.tea-bowl span {
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(29,34,32,.18);
    border-radius: 50%;
    transform: scale(var(--ripple-scale, 1));
    opacity: var(--ripple-opacity, .45);
}

.hand-mark {
    position: absolute;
    right: 18vw;
    top: 33vh;
    color: var(--dried-persimmon);
    font-family: "Nanum Pen Script", cursive;
    font-size: 34px;
    transform: rotate(-8deg);
}

.courtyard-room { background: linear-gradient(135deg, rgba(221,232,239,.36), var(--lamp-paper) 58%); }
.courtyard-grid { position: absolute; inset: 12vh 9vw; }
.panel { position: absolute; border: 1px solid rgba(156,167,160,.24); background: rgba(246,240,230,.36); box-shadow: 0 26px 70px rgba(29,34,32,.06); }
.panel.tall { left: 4%; top: 6%; width: 23%; height: 64%; }
.panel.square { left: 43%; top: 12%; width: 23%; height: 31%; background: rgba(191,215,200,.18); }
.panel.low { right: 0; bottom: 8%; width: 48%; height: 20%; }
.right-alcove { position: absolute; right: 9vw; bottom: 18vh; max-width: 540px; }
.right-alcove h2 { margin: 20px 0 26px; }
.pressed-leaf { position: absolute; left: 23vw; bottom: 24vh; width: 90px; height: 170px; border-radius: 70% 10% 70% 10%; border: 1px solid rgba(156,167,160,.55); transform: rotate(22deg); opacity: .55; }
.pressed-leaf span { position: absolute; left: 50%; top: 10%; bottom: 10%; width: 1px; background: rgba(156,167,160,.5); }
.seal { position: absolute; left: 10vw; bottom: 16vh; width: 38px; height: 38px; display: grid; place-items: center; background: var(--dried-persimmon); color: var(--lamp-paper); font-family: "Noto Serif KR", serif; }

.listening-room { background: linear-gradient(180deg, rgba(29,34,32,.96), rgba(29,34,32,.88)); color: var(--lamp-paper); }
.listening-room::before { border-color: rgba(221,232,239,.16); }
.listening-room p, .listening-room h2 { color: rgba(246,240,230,.88); }
.window-frame { position: absolute; left: 11vw; top: 13vh; width: min(48vw, 620px); height: 56vh; border: 1px solid rgba(221,232,239,.24); background: linear-gradient(135deg, rgba(221,232,239,.08), rgba(191,215,200,.04)); overflow: hidden; }
.window-frame::before, .window-frame::after { content: ""; position: absolute; background: rgba(221,232,239,.16); }
.window-frame::before { left: 50%; top: 0; width: 1px; height: 100%; }
.window-frame::after { left: 0; top: 58%; width: 100%; height: 1px; }
.moon-window { position: absolute; right: 14%; top: 18%; width: 92px; height: 92px; border-radius: 50%; background: var(--moon-blue); box-shadow: 0 0 60px rgba(221,232,239,.5); }
.ripple { position: absolute; left: 16%; bottom: 17%; border: 1px solid rgba(191,215,200,.28); border-radius: 50%; animation: ripple 8s ease-in-out infinite; }
.r1 { width: 180px; height: 44px; }
.r2 { width: 260px; height: 64px; animation-delay: 2.2s; }
.listening-copy { position: absolute; right: 9vw; top: 29vh; max-width: 540px; }
.listening-copy h2 { margin: 22px 0 28px; }
.window-note { color: rgba(221,232,239,.5); }

.ink-room { background: linear-gradient(110deg, var(--lamp-paper), rgba(156,167,160,.2)); }
.ink-paper { position: absolute; left: 12vw; top: 16vh; width: min(45vw, 560px); height: 64vh; border: 1px solid rgba(156,167,160,.25); background: rgba(246,240,230,.55); box-shadow: 0 30px 90px rgba(29,34,32,.09); }
.ink-bloom { position: absolute; left: 35%; top: 36%; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(29,34,32,.7), rgba(29,34,32,.24) 38%, transparent 69%); filter: blur(5px); animation: bloom 10s ease-in-out infinite; }
.ink-character { position: absolute; left: 43%; top: 37%; font-family: "Noto Serif KR", serif; font-size: 82px; color: rgba(29,34,32,.84); }
.vertical-slip { position: absolute; right: 13vw; top: 21vh; writing-mode: vertical-rl; max-height: 62vh; }
.vertical-slip h2 { margin: 28px 18px 0 0; max-height: 580px; font-size: clamp(28px, 4vw, 58px); }
.thread-bookmark { position: absolute; right: 34vw; top: 0; width: 2px; height: 74vh; background: var(--dried-persimmon); opacity: .55; box-shadow: 0 0 0 1px rgba(201,130,90,.08); }

.goodnight-room { min-height: 108vh; background: linear-gradient(180deg, rgba(221,232,239,.52), var(--lamp-paper) 35%, rgba(29,34,32,.92) 100%); }
.final-shoji { position: absolute; right: 8vw; top: 12vh; width: 35vw; height: 54vh; border: 1px solid rgba(156,167,160,.24); background: rgba(221,232,239,.18); transform: translateX(calc(var(--panel-shift) * -.35)); }
.final-shoji span:nth-child(1) { left: 50%; top: 0; width: 1px; height: 100%; }
.final-shoji span:nth-child(2) { top: 33%; left: 0; width: 100%; height: 1px; }
.final-shoji span:nth-child(3) { top: 66%; left: 0; width: 100%; height: 1px; }
.goodnight-copy { position: absolute; left: 10vw; bottom: 17vh; max-width: 630px; color: var(--lamp-paper); }
.goodnight-copy h2 { margin: 20px 0 24px; color: var(--lamp-paper); }
.goodnight-copy p { color: rgba(246,240,230,.72); }
.goodnight-copy strong { display: inline-block; margin-top: 38px; font-family: "Fraunces", serif; font-weight: 300; font-size: clamp(30px, 4vw, 62px); letter-spacing: .11em; }
.last-moon { position: absolute; right: 14vw; bottom: 21vh; width: 70px; height: 70px; border-radius: 50%; background: var(--moon-blue); box-shadow: 0 0 54px rgba(221,232,239,.5); opacity: .74; }

.room:not(.active) .single-line { transform: scaleX(.15); opacity: .3; }
.room.active .single-line { animation: drawLine 2.4s ease both; }

@keyframes drift { 0% { translate: 0 0; opacity: .12; } 50% { translate: 18px -34px; opacity: .55; } 100% { translate: 0 -72px; opacity: .08; } }
@keyframes fadeBreath { 0%, 100% { opacity: .12; transform: translateY(6px); } 50% { opacity: .68; transform: translateY(0); } }
@keyframes ripple { 0%, 100% { transform: scale(.92); opacity: .12; } 50% { transform: scale(1.08); opacity: .42; } }
@keyframes bloom { 0%, 100% { transform: scale(.88); opacity: .46; } 50% { transform: scale(1.12); opacity: .8; } }
@keyframes drawLine { from { transform: scaleX(.12); opacity: .18; } to { transform: scaleX(1); opacity: 1; } }

@media (max-width: 760px) {
    .floor-nav { gap: 10px; overflow: hidden; }
    .floor-nav a { font-size: 9px; letter-spacing: .08em; }
    .hero-panel { left: 25vw; width: 70vw; }
    .wordmark-wrap { left: 8vw; bottom: 34vh; }
    .kr-note { right: 6vw; }
    .desk-shelf { left: 8vw; right: 8vw; }
    .notebook { left: 18%; width: 48vw; }
    .tea-bowl { width: 92px; height: 92px; }
    .right-alcove, .listening-copy, .vertical-slip { position: relative; right: auto; top: auto; writing-mode: horizontal-tb; margin-top: 12vh; }
    .window-frame, .ink-paper { position: relative; left: auto; top: auto; width: 100%; }
    .final-shoji { width: 58vw; opacity: .56; }
}