* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.7; color: #1a1a2e; background: #f8f9fa; }

.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* Header & Navigation */
.site-header { background: #1a1a2e; color: white; padding: 0.8em 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.top-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.site-logo { color: #fff; font-size: 1.2em; font-weight: 700; text-decoration: none; }
.site-logo:hover { text-decoration: none; color: #e63946; }
.nav-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3em; }
.nav-links li { margin: 0; }
.nav-links a { color: #ccc; text-decoration: none; font-size: 0.85em; padding: 0.3em 0.5em; border-radius: 4px; transition: color 0.2s, background 0.2s; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.1); text-decoration: none; }

/* Hero */
.hero { background: linear-gradient(135deg, #1a1a2e 0%, #e63946 100%); color: white; padding: 3em 0 2.5em; text-align: center; margin-bottom: 2em; }
.hero h1 { font-size: 2.5em; margin-bottom: 0.5em; }
.hero .subtitle { color: rgba(255,255,255,0.9); font-size: 1.15em; max-width: 700px; margin: 0 auto; }

/* Guide Grid */
.guide-list { padding-bottom: 3em; }
.guide-list h2 { color: #1a1a2e; font-size: 1.6em; margin-bottom: 1em; text-align: center; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2em; }
.guide-card { background: white; border-radius: 10px; padding: 1.5em; box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-decoration: none; color: inherit; border: 1px solid #eee; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; display: block; }
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); border-color: #e63946; text-decoration: none; }
.guide-card h3 { color: #e63946; margin-bottom: 0.5em; font-size: 1.15em; }
.guide-card p { color: #555; font-size: 0.95em; margin: 0; }

/* Main Content for guide pages */
.main-content { padding: 2em 0; }
.main-content h1 { font-size: 2em; color: #1a1a2e; margin-bottom: 0.5em; }
.main-content .lead { font-size: 1.15em; color: #555; margin-bottom: 1.5em; line-height: 1.8; }
.main-content h2 { color: #e63946; margin: 2em 0 0.5em; font-size: 1.4em; border-bottom: 2px solid #eee; padding-bottom: 0.3em; }
.main-content h3 { color: #1a1a2e; margin: 1.2em 0 0.4em; font-size: 1.15em; }
.main-content p { margin-bottom: 1em; }
.main-content ul, .main-content ol { margin-bottom: 1em; padding-left: 1.5em; }
.main-content li { margin-bottom: 0.4em; }
.main-content a { color: #457b9d; }
.main-content a:hover { text-decoration: underline; }
.main-content blockquote { background: #f1f3f5; border-left: 4px solid #e63946; padding: 1em 1.5em; margin: 1em 0; font-style: italic; border-radius: 0 6px 6px 0; }
.main-content blockquote p { margin-bottom: 0; }

/* Tables */
.pronunciation-table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.pronunciation-table th, .pronunciation-table td { border: 1px solid #dee2e6; padding: 0.6em 1em; text-align: left; }
.pronunciation-table th { background: #1a1a2e; color: white; }
.pronunciation-table tr:nth-child(even) { background: #f8f9fa; }

/* Footer */
.site-footer { background: #1a1a2e; color: #aaa; padding: 2em 0; text-align: center; font-size: 0.9em; margin-top: 3em; }
.site-footer p { margin: 0; }

/* Responsive */
@media (max-width: 768px) {
  .top-nav { flex-direction: column; gap: 0.5em; }
  .nav-links { justify-content: center; }
  .hero h1 { font-size: 1.8em; }
  .guide-grid { grid-template-columns: 1fr; }
  .main-content h1 { font-size: 1.5em; }
}