/* miris.works */
/* Colors: #faf8f5, #2a2520, #6b6560, #9a9490, #c45d3e, #efe9e0, #d4cfc8, #b8b0a6 */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Work Sans', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.9; background: #faf8f5; color: #2a2520; overflow-x: hidden; }
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 10%; background: #faf8f5; }
.hero-line { display: block; width: 40vw; height: 1px; background: rgba(42, 37, 32, 0.4); margin-bottom: 20px; }
.hero-name { font-family: 'Cormorant', serif; font-weight: 300; font-size: 18px; color: #2a2520; letter-spacing: 0.02em; opacity: 0; animation: fadeIn 1.5s 1s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.room { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 60px 10%; align-items: center; min-height: 60vh; }
.room-right .room-image { order: 1; }
.room-right .room-text { order: 2; }
.room-left .room-text { order: 1; text-align: right; }
.room-left .room-image { order: 2; }
.placeholder { width: 100%; height: 40vh; max-height: 400px; border-radius: 2px; }
.room-image.small .placeholder { height: 25vh; max-height: 250px; }
.room-title { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.5rem); color: #2a2520; margin-bottom: 12px; letter-spacing: 0.02em; }
.room-desc { color: #6b6560; font-size: 15px; max-width: 380px; }
.room-left .room-desc { margin-left: auto; }
.room-meta { font-family: 'DM Mono', monospace; font-weight: 300; font-size: 11px; color: #9a9490; letter-spacing: 0.08em; display: block; margin-top: 12px; }
.corridor { padding: 40px 10%; display: flex; align-items: center; }
.corridor-line { display: block; width: 20vw; height: 1px; background: rgba(42, 37, 32, 0.25); }
.site-footer { text-align: center; padding: 80px 40px; }
.footer-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #2a2520; margin-bottom: 16px; }
.site-footer p { font-family: 'DM Mono', monospace; font-weight: 300; font-size: 11px; color: #9a9490; letter-spacing: 0.08em; }
@media (max-width: 768px) { .room { grid-template-columns: 1fr; padding: 40px 24px; } .room-left .room-text, .room-right .room-text { order: 2; text-align: left; } .room-left .room-image, .room-right .room-image { order: 1; } .room-left .room-desc { margin-left: 0; } }