/* ppuzzl.in */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #faf8f5; color: #2d2926; font-family: 'Lato', sans-serif; font-weight: 300; line-height: 1.8; position: relative; }
.ink-wash { position: fixed; top: 10%; left: 20%; width: 400px; height: 400px; background: radial-gradient(circle at 30% 40%, #d4cec6 0%, transparent 60%); pointer-events: none; opacity: 0.5; }
.enter { max-width: 700px; margin: 0 auto; padding: 8rem 2rem 4rem; }
.enter-grid { display: grid; grid-template-columns: 2fr 3fr; }
.brand-col { }
.brand { font-family: 'Cormorant', serif; font-weight: 400; font-size: clamp(2.5rem, 5vw, 3.5rem); }
.brand-sub { font-family: 'Cormorant', serif; font-weight: 400; font-size: 1.2rem; color: #8b7355; border-left: 2px solid #e8e4de; padding-left: 0.5rem; }
.empty-col { }
.ink-line { border-top: 1px solid #2d2926; width: 80%; margin: 3rem auto; font-family: 'Inter', sans-serif; }
.ink-line.short { width: 30%; }
.balance { max-width: 700px; margin: 0 auto; padding: 2rem 2rem 4rem; }
.section-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 2rem; }
.section-grid.reverse { grid-template-columns: 3fr 2fr; }
.content-col { }
.space-col { }
.section-title { font-family: 'Cormorant', serif; font-weight: 400; font-size: 1.5rem; color: #8b7355; margin-bottom: 0.8rem; }
.section-text { font-size: 0.85rem; color: #5c4f42; font-family: 'Lato', sans-serif; }
::before, ::after { font-family: 'Inter', sans-serif; }
.garden { text-align: center; padding: 4rem 2rem; }
.stones { display: flex; justify-content: center; gap: 2rem; margin: 1rem 0; }
.stone { width: 16px; height: 16px; border-radius: 50%; background: #7d8c6e; }
.still { max-width: 700px; margin: 0 auto; padding: 4rem 2rem 6rem; text-align: center; }
.close-text { font-family: 'Cormorant', serif; font-weight: 400; font-size: 1.2rem; color: #8b7355; margin-top: 2rem; }
.metadata { font-family: 'Space Mono', monospace; font-size: 0.75rem; color: #7d8c6e; margin-top: 0.5rem; letter-spacing: 0.05em; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }