:root { --brand-primary: #0f63b0; --brand-dark: #094682; --brand-light: #e6f0fa; --accent: #f59e0b; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #374151; background: #fff; font-family: Inter, sans-serif; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 11000; transform: translateY(-150%); border-radius: .35rem; background: #fff; color: #094682; padding: .75rem 1rem; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.skip-link:focus { transform: translateY(0); outline: 3px solid #f59e0b; }
.custom-contact-form-unavailable { border: 2px solid #0f63b0; border-radius: .75rem; background: #e6f0fa; padding: 1.5rem; color: #094682; }
.mystic-blog-hero { padding: 6rem 1.5rem; background: linear-gradient(135deg, #094682, #0f63b0); color: #fff; text-align: center; }
.mystic-blog-hero h1 { margin: .5rem 0; font-family: Montserrat, sans-serif; font-size: clamp(2.25rem, 6vw, 4rem); }
.mystic-blog-list { max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem; }
.mystic-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 2rem; }
.mystic-blog-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff; box-shadow: 0 5px 18px rgba(9,70,130,.08); }
.mystic-blog-card a { color: inherit; text-decoration: none; }
.mystic-blog-card__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mystic-blog-card__body { padding: 1.35rem; }
.mystic-blog-card__body h2 { margin: .35rem 0 .75rem; color: #094682; font-family: Montserrat, sans-serif; font-size: 1.4rem; }
.mystic-blog-card__tag, .mystic-post__tag { color: #0f63b0; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.mystic-blog-card__date { color: #6b7280; font-size: .875rem; }
.mystic-post__inner { max-width: 52rem; margin: 0 auto; padding: 4rem 1.5rem; }
.mystic-post header { text-align: center; }
.mystic-post h1 { margin: .75rem 0; color: #094682; font-family: Montserrat, sans-serif; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.08; }
.mystic-post__excerpt { font-size: 1.2rem; }
.mystic-post__byline { color: #6b7280; }
.mystic-post__image { display: block; width: 100%; height: auto; margin: 2rem 0; border-radius: .75rem; }
.mystic-post__content { font-family: Lora, serif; font-size: 1.08rem; line-height: 1.8; }
.mystic-post__content img { max-width: 100%; height: auto; }
.mystic-error { min-height: 62vh; display: grid; place-items: center; padding: 4rem 1.25rem; background: linear-gradient(145deg, #e6f0fa, #fff); }
.mystic-error__inner { max-width: 44rem; text-align: center; }
.mystic-error__code { margin: 0; color: #0f63b0; font-size: 1.1rem; font-weight: 800; letter-spacing: .15em; }
.mystic-error h1 { margin: .5rem 0 1rem; color: #094682; font-family: Montserrat, sans-serif; font-size: clamp(2rem, 7vw, 4.5rem); }
.mystic-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.75rem; }
.mystic-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 2px solid #0f63b0; border-radius: 999px; background: #0f63b0; color: #fff; padding: .7rem 1.2rem; font-weight: 700; text-decoration: none; }
.mystic-button--outline { background: #fff; color: #0f63b0; }
.mystic-button:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }