*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;line-height:1.6}body{background:#1A1525;color:#E8DFD0;font-family:'Inter',sans-serif}
.container{max-width:960px;margin:0 auto;padding:0 24px}
.site-header{background:#2A1B3D;border-bottom:2px solid #C9A84C;padding:16px 0}.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Playfair Display',serif;font-size:1.8rem;color:#C9A84C}.logo-en{font-family:'Space Mono',monospace;font-size:0.8rem;color:#8B4D6E;display:block}
.nav{display:flex;gap:16px}.nav a{color:#E8DFD0;text-decoration:none;font-size:0.85rem;transition:color 200ms}.nav a:hover{color:#C9A84C}
.hero{padding:64px 0;text-align:center}
.angular-frame{border:2px solid #C9A84C;padding:40px;position:relative}
.angular-frame::before,.angular-frame::after{content:'';position:absolute;width:24px;height:24px;border-color:#8B4D6E;border-style:solid}
.angular-frame::before{top:-4px;left:-4px;border-width:3px 0 0 3px}
.angular-frame::after{bottom:-4px;right:-4px;border-width:0 3px 3px 0}
.hero-title{font-family:'Playfair Display',serif;font-size:2.4rem;color:#C9A84C;margin-bottom:12px}
.hero-sub{color:#E8DFD0;font-size:0.95rem;max-width:560px;margin:0 auto}
.section-title{font-family:'Playfair Display',serif;font-size:1.6rem;color:#C9A84C;margin-bottom:24px;text-align:center}
.culture-section{padding:64px 0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.culture-card{background:#2A1B3D;border:1px solid #8B4D6E;border-radius:4px;padding:24px;opacity:0;transform:translateY(20px);transition:all 400ms ease-out}
.culture-card.visible{opacity:1;transform:translateY(0)}
.culture-card:hover{border-color:#C9A84C}
.card-year{font-family:'Space Mono',monospace;font-size:0.7rem;color:#8B4D6E;letter-spacing:0.1em}
.culture-card h3{font-family:'Playfair Display',serif;font-size:1.1rem;color:#C9A84C;margin:8px 0}
.culture-card p{font-size:0.8rem;color:#E8DFD0;opacity:0.85}
.timeline-section{padding:48px 0;border-top:1px solid #2A1B3D}
.era-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-left:3px solid #8B4D6E;margin-bottom:8px;transition:all 200ms}
.era-bar.active{border-left-color:#C9A84C;background:rgba(201,168,76,0.1)}
.era-name{font-family:'Playfair Display',serif;font-size:1rem;color:#E8DFD0}
.era-years{font-family:'Space Mono',monospace;font-size:0.75rem;color:#8B4D6E}
.site-footer{padding:32px;text-align:center;color:#8B4D6E;font-size:0.8rem;border-top:1px solid #2A1B3D}
@media(max-width:600px){.card-grid{grid-template-columns:1fr}.hero-title{font-size:1.8rem}}