/* =========================================================
   mystical-extra.css
   Additive polish on top of the theme's own mystical.css.
   New components only — nothing here overrides base rules,
   so the original theme keeps working if this file is removed.
   ========================================================= */


:root{
  --os-ink: #0A0718;
  --os-line: rgba(212,169,78,.22);
  --os-line-strong: rgba(212,169,78,.4);
  --os-muted: rgba(245,239,224,.62);
  --os-muted-2: rgba(245,239,224,.42);
}

/* ---------------- Top bar / navbar ---------------- */
.os-navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 5vw; position:sticky; top:0; z-index:50;
  background:rgba(10,7,24,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--os-line);
}
.os-navbar .os-brand{display:flex; align-items:center; gap:.6rem;}
.os-navbar .os-brand .mark{width:34px; height:34px;}
.os-navbar .os-brand .word{font-family:var(--os-font-display); font-size:1.25rem; color:var(--os-cream); line-height:1.1;}
.os-navbar .os-brand .word small{display:block; font-family:var(--os-font-body); font-size:.6rem; letter-spacing:.22em; color:var(--os-gold); font-weight:700;}
.os-navbar nav{display:flex; align-items:center; gap:1.9rem;}
.os-navbar nav a{color:var(--os-cream); font-size:.9rem; font-weight:600; opacity:.85;}
.os-navbar nav a:hover{opacity:1; color:var(--os-gold);}
.os-navbar .os-nav-right{display:flex; align-items:center; gap:1.1rem;}
.os-icon-btn{color:var(--os-cream); opacity:.75; display:inline-flex;}
.os-icon-btn:hover{opacity:1; color:var(--os-gold);}
.os-nav-toggle{display:none; background:none; border:1px solid var(--os-line-strong); border-radius:6px; width:40px; height:36px; color:var(--os-cream);}
@media (max-width:980px){
  .os-navbar nav{position:fixed; inset:70px 0 0 0; background:var(--os-midnight); flex-direction:column; align-items:flex-start; padding:2rem 6vw; gap:1.3rem; transform:translateY(-8px); opacity:0; visibility:hidden; transition:.2s;}
  .os-navbar nav.is-open{opacity:1; visibility:visible; transform:none;}
  .os-nav-toggle{display:block;}
}

/* ---------------- Section wrapper / kicker ---------------- */
.os-section{padding:clamp(3.5rem,7vw,6rem) 5vw;}
.os-section-tight{padding:clamp(2rem,4vw,3rem) 5vw;}
.os-kicker{
  font-size:.76rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--os-gold); display:flex; align-items:center; gap:.6em; margin-bottom:.9em;
}
.os-kicker::before, .os-kicker.center::after{content:""; width:20px; height:1px; background:var(--os-gold);}
.os-kicker.center{justify-content:center;}
.os-kicker.center::before{display:none;}

/* ---------------- Hero (split) ---------------- */
.os-hero{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,4.5rem); align-items:center;
}
.os-hero h1{font-size:clamp(2.4rem,4vw,3.6rem); line-height:1.08; margin:.2em 0 .5em; font-weight:600;}
.os-hero p.lede{color:var(--os-muted); font-size:1.05rem; max-width:46ch;}
.os-feature-row{display:flex; gap:2rem; flex-wrap:wrap; margin-top:2.4rem;}
.os-feature{display:flex; align-items:flex-start; gap:.7rem; max-width:180px;}
.os-feature svg{flex:none; width:26px; height:26px; color:var(--os-gold); margin-top:.1rem;}
.os-feature .t{font-family:var(--os-font-display); font-size:1rem; color:var(--os-cream);}
.os-feature .d{font-size:.76rem; color:var(--os-muted-2);}

.os-hero-art{
  position:relative; aspect-ratio:1/1.02; border-radius:50%;
  overflow:hidden; border:1px solid var(--os-line-strong);
  box-shadow:0 0 0 1px rgba(212,169,78,.08), 0 30px 80px rgba(0,0,0,.55), 0 0 90px rgba(107,63,160,.35);
}
.os-hero-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.os-hero-art .glow{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 38%, rgba(240,200,107,.16), transparent 55%),
             linear-gradient(200deg, rgba(107,63,160,.35), rgba(14,11,42,.55) 70%);
}
.os-hero-art .ring-svg{position:absolute; inset:0; width:100%; height:100%;}
.os-hero-art .ring-slow{animation:osSpin 130s linear infinite; transform-origin:50% 50%;}
.os-hero-art .ring-rev{animation:osSpinRev 190s linear infinite; transform-origin:50% 50%;}
@keyframes osSpin{to{transform:rotate(360deg);}}
@keyframes osSpinRev{to{transform:rotate(-360deg);}}
@media (prefers-reduced-motion:reduce){.ring-slow,.ring-rev{animation:none;}}
@media (max-width:900px){.os-hero{grid-template-columns:1fr;} .os-hero-art{max-width:420px; margin:0 auto;}}

/* ---------------- Mandala / cosmic journey ---------------- */
.os-mandala-wrap{position:relative; aspect-ratio:1/1; max-width:440px; margin:0 auto;}
.os-mandala-wrap svg{width:100%; height:100%;}
.os-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,6vw,4.5rem); align-items:center;}
.os-split.flip{grid-template-columns:1.15fr .85fr;}
.os-split.flip .os-split-art{order:2;}
@media (max-width:860px){.os-split, .os-split.flip{grid-template-columns:1fr;} .os-split.flip .os-split-art{order:0;}}

/* ---------------- Service cards ---------------- */
.os-service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem;}
@media (max-width:980px){.os-service-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.os-service-grid{grid-template-columns:1fr;}}
.os-service-card{text-align:center; padding:2.1rem 1.4rem;}
.os-service-card .icon-ring{
  width:60px; height:60px; border-radius:50%; margin:0 auto 1.1rem;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(212,169,78,.14), transparent 70%);
  border:1px solid var(--os-line-strong);
}
.os-service-card .icon-ring svg{width:26px; height:26px; color:var(--os-gold);}
.os-service-card h3{font-size:1.2rem; margin-bottom:.4em;}
.os-service-card p{font-size:.88rem; color:var(--os-muted); margin-bottom:1rem;}
.os-service-card a{font-size:.82rem; font-weight:700;}

/* ---------------- Pill tabs (Monthly/Yearly, Daily/Weekly) ---------------- */
.os-pill-tabs{display:inline-flex; background:rgba(255,255,255,.04); border:1px solid var(--os-line); border-radius:999px; padding:.3rem;}
.os-pill-tabs button, .os-pill-tabs label{
  border:none; background:none; color:var(--os-muted); font-weight:700; font-size:.82rem;
  padding:.55rem 1.4rem; border-radius:999px; cursor:pointer; transition:.2s;
}
.os-pill-tabs .is-active{background:var(--os-gold); color:var(--os-midnight);}

/* ---------------- Zodiac grid v2 (icons + circle) ---------------- */
.os-zgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:1rem;}
@media (max-width:900px){.os-zgrid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.os-zgrid{grid-template-columns:repeat(2,1fr);}}
.os-ztile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  padding:1.3rem .6rem; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg, rgba(107,63,160,.16), rgba(27,16,53,.4));
  border:1px solid var(--os-line); transition:.3s;
}
.os-ztile:hover, .os-ztile:focus-visible{transform:translateY(-4px); border-color:var(--os-gold); box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 20px rgba(212,169,78,.18);}
.os-ztile .ring{width:46px; height:46px; border-radius:50%; border:1px solid var(--os-line-strong); display:flex; align-items:center; justify-content:center;}
.os-ztile svg{width:22px; height:22px; color:var(--os-gold); stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.os-ztile .name{font-family:var(--os-font-display); font-size:1.02rem; color:var(--os-cream);}
.os-ztile .dates{font-size:.72rem; color:var(--os-muted-2);}

/* ---------------- Article / listing cards v2 ---------------- */
.os-article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
@media (max-width:900px){.os-article-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.os-article-grid{grid-template-columns:1fr;}}
.os-acard{border:1px solid var(--os-line); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.015); transition:.3s;}
.os-acard:hover{border-color:var(--os-gold); transform:translateY(-3px);}
.os-acard .thumb{position:relative; aspect-ratio:16/10;}
.os-acard .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.os-acard .thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,7,24,.05), rgba(10,7,24,.55));}
.os-acard .cat{position:absolute; left:.9rem; top:.9rem; z-index:2; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--os-midnight); background:var(--os-gold); padding:.3em .7em; border-radius:5px;}
.os-acard .body{padding:1.2rem 1.3rem 1.4rem;}
.os-acard h3{font-size:1.08rem; margin:0 0 .4em;}
.os-acard .meta{font-size:.76rem; color:var(--os-muted-2);}

/* ---------------- Sign badge / detail page ---------------- */
.os-sign-hero{display:grid; grid-template-columns:auto 1fr; gap:2.2rem; align-items:center;}
.os-sign-badge{width:120px; height:120px; border-radius:50%; border:1px solid var(--os-line-strong); position:relative; overflow:hidden; flex:none;}
.os-sign-badge img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.os-sign-badge .tint{position:absolute; inset:0; background:linear-gradient(160deg, rgba(107,63,160,.55), rgba(14,11,42,.65)); mix-blend-mode:multiply;}
.os-sign-badge svg{position:relative; z-index:2; width:52%; height:52%; margin:24% auto; color:var(--os-gold-bright); display:block; stroke:currentColor; fill:none; stroke-width:1.5;}
.os-facts{display:flex; gap:1.6rem; margin-top:.6rem;}
.os-fact{display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--os-muted);}
.os-fact svg{width:18px; height:18px; color:var(--os-gold);}
.os-traits{list-style:none; margin:0; padding:0;}
.os-traits li{display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--os-line); font-size:.9rem; color:var(--os-cream);}
.os-traits li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--os-gold); flex:none;}
.os-side-box{border:1px solid var(--os-line); border-radius:14px; padding:1.5rem;}

/* ---------------- Article body + sidebar ---------------- */
.os-post-layout{display:grid; grid-template-columns:1fr 300px; gap:clamp(2rem,5vw,3.5rem); align-items:start;}
@media (max-width:920px){.os-post-layout{grid-template-columns:1fr;}}
.os-post-hero{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/7; margin-bottom:1.6rem;}
.os-post-hero img{width:100%; height:100%; object-fit:cover;}
.os-post-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,7,24,.05), rgba(10,7,24,.7));}
.os-post-hero .cat{position:absolute; left:1.2rem; top:1.2rem; z-index:2; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--os-midnight); background:var(--os-gold); padding:.35em .8em; border-radius:5px;}
.os-pull{border-left:2px solid var(--os-gold); padding:.3em 0 .3em 1.4em; margin:2em 0; font-family:var(--os-font-display); font-style:italic; font-size:1.2rem; color:var(--os-gold-bright);}
.os-share-row{display:flex; gap:.8rem; margin-top:2rem;}
.os-share-row a{width:36px; height:36px; border:1px solid var(--os-line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--os-cream);}
.os-share-row a:hover{border-color:var(--os-gold); color:var(--os-gold);}
.os-side-list li{padding:.7rem 0; border-bottom:1px solid var(--os-line); display:flex; gap:.8rem; align-items:center;}
.os-side-list li:last-child{border-bottom:none;}
.os-side-list .thumb{width:44px; height:44px; border-radius:8px; overflow:hidden; flex:none;}
.os-side-list .thumb img{width:100%; height:100%; object-fit:cover;}
.os-side-list .t{font-size:.85rem; color:var(--os-cream); line-height:1.3;}
.os-side-list .d{font-size:.7rem; color:var(--os-muted-2);}
.os-cat-list li{padding:.5rem 0; font-size:.88rem; color:var(--os-muted); border-bottom:1px dashed var(--os-line);}
.os-cat-list li:last-child{border-bottom:none;}

/* ---------------- Contact ---------------- */
.os-contact-hero{position:relative; border-radius:16px; overflow:hidden; padding:3rem 5vw; margin-bottom:0;}
.os-contact-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.os-contact-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(10,7,24,.85), rgba(14,11,42,.55)); z-index:1;}
.os-contact-hero .in{position:relative; z-index:2;}
.os-contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start;}
@media (max-width:860px){.os-contact-grid{grid-template-columns:1fr;}}
.os-contact-item{display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.4rem;}
.os-contact-item svg{width:22px; height:22px; color:var(--os-gold); flex:none; margin-top:.15rem;}
.os-contact-item .t{font-weight:700; color:var(--os-cream); font-size:.92rem;}
.os-contact-item .d{font-size:.86rem; color:var(--os-muted);}
.os-form{border:1px solid var(--os-line); border-radius:16px; padding:2rem; background:rgba(255,255,255,.015);}
.os-field{margin-bottom:1.2rem;}
.os-field label{display:block; font-size:.82rem; font-weight:700; color:var(--os-cream); margin-bottom:.5em;}
.os-field input, .os-field textarea{
  width:100%; background:rgba(10,7,24,.7); border:1px solid var(--os-line-strong); border-radius:8px;
  padding:.85em 1em; color:var(--os-cream); font-family:var(--os-font-body); font-size:.95rem;
}
.os-field textarea{min-height:130px; resize:vertical;}
.os-field input:focus, .os-field textarea:focus{outline:2px solid var(--os-gold); outline-offset:1px;}

/* ---------------- Footer v2 ---------------- */
.os-footer-v2{border-top:1px solid var(--os-line); padding:3rem 5vw 1.6rem;}
.os-footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2rem; margin-bottom:2rem;}
.os-footer-nav{display:flex; gap:1.6rem; flex-wrap:wrap;}
.os-footer-nav a{font-size:.86rem; color:var(--os-muted);}
.os-footer-social{display:flex; gap:.8rem;}
.os-footer-social a{width:34px; height:34px; border:1px solid var(--os-line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--os-cream);}
.os-footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding-top:1.4rem; border-top:1px solid var(--os-line); font-size:.78rem; color:var(--os-muted-2);}

/* ---------------- Buttons v2 (keeps .os-btn from base, adds outline) ---------------- */
.os-btn--outline{background:transparent; border:1px solid var(--os-line-strong); color:var(--os-cream) !important;}
.os-btn--outline:hover{border-color:var(--os-gold); box-shadow:none; color:var(--os-gold) !important;}
.os-btn--sm{padding:.6rem 1.4rem; font-size:.85rem;}

.container{max-width:1240px; margin:0 auto;}