.class-hero { background: linear-gradient(160deg, var(--chalkboard) 0%, var(--chalkboard-deep) 100%); padding: 150px 0 70px; }
.class-hero .section-eyebrow { color: var(--marigold-light); }
.class-hero h1 { color: var(--chalk-white); font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 20px; }
.class-meta { display: flex; gap: 24px; flex-wrap: wrap; }
.class-meta span { font-family: var(--font-mono); font-size: 0.85rem; color: var(--chalk-white); background: rgba(244,241,232,0.08); border: 1px solid rgba(244,241,232,0.18); padding: 8px 16px; border-radius: 20px; }

.class-subjects { padding: 80px 0; background: var(--paper); }
.class-subjects h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--chalkboard); margin-bottom: 26px; }
.subject-list { display: flex; flex-wrap: wrap; gap: 12px; }
.subject-list li { font-family: var(--font-mono); font-size: 0.88rem; color: var(--ink); background: #fff; border: 1px solid var(--paper-line); padding: 10px 18px; border-radius: 20px; }

.class-gallery { padding: 80px 0 100px; background: var(--chalkboard-deep); }
.class-gallery h2 { color: var(--chalk-white); font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 26px; }
.class-gallery .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.class-gallery .gallery-hint { margin-top: 20px; font-size: 0.78rem; color: rgba(244,241,232,0.5); font-family: var(--font-mono); }

@media (max-width: 900px) { .class-gallery .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .class-gallery .gallery-grid { grid-template-columns: 1fr; } }