* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Nunito', sans-serif; background: #F5F2ED; color: #5A524A; line-height: 1.75; font-size: 16px; background-image: radial-gradient(ellipse at 20% 50%, rgba(240, 237, 232, 0.5) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(221, 216, 208, 0.3) 0%, transparent 50%); }
h1, h2 { font-family: 'Nunito', sans-serif; font-weight: 700; color: #3A3330; }

.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.hero-facade { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 600px; opacity: 0; animation: clipReveal 0.8s 0.2s ease forwards; }
@keyframes clipReveal { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

.hero-content { position: relative; z-index: 2; text-align: center; }
.hero-title { font-family: 'Silkscreen', cursive; font-size: 36px; font-weight: 400; color: #3A3330; letter-spacing: 2px; }
.hero-title .letter { display: inline-block; opacity: 0; animation: letterBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes letterBounce { 0% { opacity: 0; transform: translateY(-3px); } 100% { opacity: 1; transform: translateY(0); } }
.hero-sub { font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 16px; color: #5A524A; margin-top: 12px; opacity: 0; animation: fadeIn 0.6s 1.5s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.greek-key-divider { max-width: 800px; margin: 0 auto; padding: 8px 24px; }
.greek-key-divider svg { width: 100%; height: 16px; }
.meander { stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.meander.drawn { animation: drawMeander 1.2s ease forwards; }
@keyframes drawMeander { to { stroke-dashoffset: 0; } }

.z-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 900px; margin: 0 auto; padding: 48px 24px; align-items: center; }
.z-row.reverse { direction: rtl; }
.z-row.reverse > * { direction: ltr; }

.z-block { opacity: 0; transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.z-block.illustration { transform: translateX(-30px); }
.z-row.reverse .z-block.illustration { transform: translateX(30px); }
.z-block.text { transform: translateX(30px); }
.z-row.reverse .z-block.text { transform: translateX(-30px); }
.z-block.visible { opacity: 1; transform: translateX(0); }

.z-block h2 { font-size: 28px; margin-bottom: 12px; }
.z-block p { margin-bottom: 12px; }
.pixel-label { font-family: 'Silkscreen', cursive; font-size: 12px; color: #7A6B5A; }

.marble-frame { background: linear-gradient(135deg, #F0EDE8 0%, #E3DFD8 25%, #F5F2ED 50%, #DDD8D0 75%, #F0EDE8 100%); border: 2px solid #C4B8AA; padding: 12px; border-radius: 4px; transition: border-color 0.3s ease; }
.marble-frame:hover { border-color: #B8926A; }
.diorama { width: 100%; height: auto; }

.gift-shop { max-width: 900px; margin: 0 auto; padding: 48px 24px; }
.gift-shop-title { font-family: 'Silkscreen', cursive; font-size: 20px; color: #3A3330; margin-bottom: 24px; text-align: center; }
.postcard-shelf { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; }
.postcard { flex: 0 0 200px; background: #DDD8D0; border: 2px solid #C4B8AA; padding: 20px 16px; text-align: center; transition: border-color 0.3s ease, transform 0.2s ease; }
.postcard:hover { border-color: #B8926A; transform: translateY(-4px); }
.postcard-label { font-family: 'Silkscreen', cursive; font-size: 14px; color: #3A3330; display: block; margin-bottom: 8px; }
.postcard-desc { font-size: 14px; color: #5A524A; }

.site-footer { text-align: center; padding: 40px 24px; border-top: 1px solid #C4B8AA; }

/* Palette: #9B8B7A #C4B8AA #7A9B8A #B8926A #DDD8D0 */
@media (max-width: 768px) {
    .z-row { grid-template-columns: 1fr; }
    .z-row.reverse { direction: ltr; }
    .hero-title { font-size: 24px; }
}