/* ═══════════════════════════════════════════════════════════════
   THE BLUEPRINT — Responsive Shrine
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .hero-arch { flex-direction: column; text-align: center; gap: 2rem; }
    .hero-p { margin-left: auto; margin-right: auto; }
    .hero-acts { justify-content: center; }
    .story-wrap { grid-template-columns: 1fr; }
    .about-chamber { grid-template-columns: 1fr; text-align: center; }
    .about-icon { margin: 0 auto; }
    .blog-pillars { grid-template-columns: 1fr; }
    .testimon-vein { grid-template-columns: 1fr 1fr; }
    .scroll-cards { grid-template-columns: repeat(2, 1fr); }
    .foot er-pillars { grid-template-columns: 1fr 1fr; }
    .temple-timeline::before { left: 20px; }
    .tl-item, .tl-item:nth-child(odd) { flex-direction: row; padding-left: 50px; }
    .tl-content { width: 100%; }
    .tl-dot { left: 20px; transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .section { padding: 4rem 1.5rem; }
    .nav-shrine {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column;
        background: rgba(20, 17, 16, 0.98);
        border-bottom: 1px solid rgba(201, 168, 76, 0.15);
        padding: 1rem 2rem; gap: 0.3rem;
    }
    .nav-shrine.open { display: flex; }
    .nav-hammer { display: block; }
    .hero-h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
    .sacred-seal { width: 200px; height: 200px; }
    .hall-grid { grid-template-columns: 1fr; }
    .scroll-cards { grid-template-columns: 1fr; }
    .testimon-vein { grid-template-columns: 1fr; }
    .footer-pillars { grid-template-columns: 1fr; }
    .wheel-shrine { width: 280px; height: 280px; }
    .fr { grid-template-columns: 1fr; }
    .manuscript { padding: 1.5rem; }
    .pg-hdr { padding: 7rem 1.5rem 2.5rem; }
    .footer-base { flex-direction: column; text-align: center; }
    .about-icon { width: 180px; height: 180px; }
    .wheel-revelation { min-height: auto; }
}

@media (max-width: 480px) {
    .nav-inner { padding: 0.6rem 1rem; }
    .hero-acts { flex-direction: column; align-items: center; }
    .btn { width: 100%; justify-content: center; }
    .sacred-seal { width: 160px; height: 160px; }
    .hall-grid { gap: 1rem; }
    .hall-tablet { padding: 1.5rem; }
    .scroll-torch { bottom: 1rem; right: 1rem; width: 38px; height: 38px; }
    .manuscript { padding: 1rem; }
}

@media (max-width: 360px) {
    .hero-h1 { font-size: 1.8rem; }
    .h2 { font-size: 1.4rem; }
    .brand-text { font-size: 1rem; }
}