* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Karla', sans-serif; background: #F5F0E8; color: #6B5E52; line-height: 1.9; font-size: 16px; font-weight: 300; }
h1, h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; color: #4A3F35; }

.return-btn { position: fixed; top: 20px; left: 20px; z-index: 100; width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; cursor: pointer; opacity: 0.4; transition: opacity 0.3s ease; animation: slowSpin 30s linear infinite; }
.return-btn:hover { opacity: 0.8; }
@keyframes slowSpin { to { transform: rotate(360deg); } }

.steam-wisps { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.steam { animation: steamFloat 4s ease-in-out infinite alternate; }
.s1 { animation-delay: 0s; }
.s2 { animation-delay: 1s; }
.s3 { animation-delay: 2s; }
@keyframes steamFloat { 0% { transform: translateY(0); opacity: 0.25; } 100% { transform: translateY(-8px); opacity: 0.1; } }

.hero-section { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; }
.domain-title { font-size: 48px; letter-spacing: 0.01em; line-height: 1.2; margin-bottom: 12px; }
.domain-title .char { display: inline-block; }
.annotation-note { font-family: 'Caveat', cursive; font-size: 20px; color: #9B8A78; font-style: italic; }

.kintsugi-line { max-width: 560px; margin: 0 auto; padding: 0 24px; }
.gold-crack { stroke-dasharray: 600; stroke-dashoffset: 600; }
.kintsugi-line.visible .gold-crack { animation: drawCrack 0.8s ease forwards; }
@keyframes drawCrack { to { stroke-dashoffset: 0; } }

.content-block { max-width: 560px; padding: 100px 24px 80px; position: relative; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.content-block.visible { opacity: 1; transform: translateY(0); }
.content-block.left-align { margin-left: 8vw; margin-right: auto; }
.content-block.right-align { margin-left: auto; margin-right: 12vw; }
.content-block h2 { font-size: 40px; margin-bottom: 16px; line-height: 1.2; }
.content-block p { margin-bottom: 16px; }

.margin-note { font-family: 'Caveat', cursive; font-size: 18px; color: #9B8A78; position: absolute; right: -60px; bottom: 60px; transform: rotate(-3deg); }
.right-align .margin-note { left: -60px; right: auto; transform: rotate(2deg); }

.ring-stain { position: absolute; top: 20px; right: -20px; pointer-events: none; }
.right-ring { right: auto; left: -20px; }

.site-footer { text-align: center; padding: 60px 24px; }
.footer-note { font-family: 'Caveat', cursive; font-size: 18px; color: #9B8A78; }

/* Palette: #E8DDD0 #C7A882 #8B6B4A #D4C4B0 */
@media (max-width: 600px) {
    .content-block.left-align, .content-block.right-align { margin-left: auto; margin-right: auto; padding: 60px 24px 40px; }
    .margin-note { position: relative; right: auto; left: auto; bottom: auto; display: block; margin-top: 12px; transform: rotate(-1deg); }
    .domain-title { font-size: 36px; }
    .ring-stain { display: none; }
}