/* DesigningAxis — guides.min.css | Generated 2026-05-29 */
.guide-wrap{
display:grid;grid-template-columns:260px 1fr;gap:0;max-width:1160px;margin:0 auto;align-items:start;padding:3rem 2rem}
.guide-sidebar{
position:sticky;top:5rem;padding-right:2.5rem;border-right:1px solid var(--border)}
.sidebar-guide-title{
font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem;font-weight:400}
.toc-list{
list-style:none;margin-bottom:2rem}
.toc-list li{
margin-bottom:0.1rem}
.toc-list a{
font-size:0.78rem;color:var(--muted);text-decoration:none;font-weight:300;padding:0.4rem 0.6rem;display:block;border-left:2px solid transparent;transition:all 0.2s;line-height:1.4}
.toc-list a:hover,.toc-list a.active{
color:var(--dark);border-left-color:var(--gold);background:rgba(201,169,110,0.06)}
.sidebar-cta{
background:var(--dark);padding:1.5rem;text-align:center}
.sidebar-cta .label{
color:var(--gold);font-size:0.6rem}
.sidebar-cta h4{
font-family:var(--serif);font-size:0.95rem;color:var(--white);font-weight:400;margin:0.5rem 0 0.75rem;line-height:1.4}
.sidebar-cta a{
display:block;background:var(--gold);color:var(--dark);font-family:var(--sans);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.65rem;text-decoration:none;font-weight:500;transition:background 0.2s;margin-bottom:0.5rem}
.sidebar-cta a:hover{
background:var(--gold-lt)}
.sidebar-cta .wa-link{
background:transparent;border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.5);font-size:0.65rem}
.sidebar-cta .wa-link:hover{
border-color:var(--gold);color:var(--gold)}
.sidebar-related{
margin-top:1.5rem}
.sidebar-related p{
font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.75rem}
.sidebar-related a{
display:block;font-size:0.78rem;color:var(--text);text-decoration:none;padding:0.5rem 0;border-bottom:1px solid var(--border);font-weight:300;transition:color 0.2s}
.sidebar-related a:hover{
color:var(--gold)}
.sidebar-related a::before{
content:'→ ';color:var(--gold);font-size:0.7rem}
.guide-body{
padding-left:3rem;min-width:0}
.guide-breadcrumb{
font-size:0.68rem;letter-spacing:0.08em;color:var(--muted);margin-bottom:1.5rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.guide-breadcrumb a{
color:var(--muted);text-decoration:none;transition:color 0.2s}
.guide-breadcrumb a:hover{
color:var(--gold)}
.guide-breadcrumb span{
color:var(--border)}
.guide-hero-tag{
font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:0.75rem}
.guide-title{
font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--dark);font-weight:400;line-height:1.2;margin-bottom:0.75rem}
.guide-title em{
color:var(--gold);font-style:italic}
.guide-subtitle{
font-size:1rem;color:var(--muted);font-weight:300;line-height:1.7;max-width:600px;margin-bottom:1.5rem}
.guide-meta{
display:flex;gap:1.5rem;flex-wrap:wrap;padding:1rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:2.5rem}
.guide-meta-item{
font-size:0.72rem;color:var(--muted);font-weight:300}
.guide-meta-item strong{
color:var(--dark);font-weight:500;display:block;font-size:0.78rem;margin-bottom:0.1rem}
.guide-hero-img{
width:100%;height:auto;display:block;margin-bottom:2.5rem;max-width:100%}
.guide-img-placeholder{
width:100%;height:220px;background:var(--cream-dk);border:1px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:2.5rem;text-align:center;padding:2rem}
.guide-img-placeholder .img-ph-label{
font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem}
.guide-img-placeholder .img-ph-path{
font-family:monospace;font-size:0.75rem;color:var(--muted);background:var(--white);border:1px solid var(--border);padding:0.3rem 0.75rem;margin-top:0.5rem}
.guide-img-placeholder .img-ph-desc{
font-size:0.8rem;color:var(--muted);font-weight:300;line-height:1.6}
.guide-img-wrap{
margin:2rem 0;position:relative}
.guide-img-wrap img{
width:100%;height:auto;display:block;max-width:100%}
.guide-img-wrap .img-placeholder{
width:100%;height:300px;background:var(--cream-dk);border:1px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem}
.guide-img-wrap .img-placeholder span{
font-size:0.68rem;color:var(--muted);font-weight:300}
.guide-img-wrap .img-placeholder code{
font-size:0.7rem;color:var(--gold);background:var(--white);border:1px solid var(--border);padding:0.2rem 0.5rem;margin-top:0.35rem;display:block}
.img-caption{
font-size:0.72rem;color:var(--muted);font-weight:300;margin-top:0.5rem;font-style:italic}
.guide-body h2{
font-family:var(--serif);font-size:1.55rem;color:var(--dark);font-weight:400;margin:2.5rem 0 1rem;line-height:1.3;scroll-margin-top:5rem}
.guide-body h2::before{
content:'';display:block;width:32px;height:2px;background:var(--gold);margin-bottom:0.75rem}
.guide-body h3{
font-family:var(--serif);font-size:1.1rem;color:var(--dark);font-weight:500;margin:1.75rem 0 0.75rem;line-height:1.4}
.guide-body p{
font-size:0.95rem;color:var(--text);line-height:1.9;font-weight:300;margin-bottom:1.25rem}
.guide-body ul,.guide-body ol{
margin:1rem 0 1.5rem 0;padding:0;list-style:none}
.guide-body ul li,.guide-body ol li{
font-size:0.92rem;color:var(--text);font-weight:300;padding:0.5rem 0 0.5rem 1.5rem;border-bottom:1px solid var(--border);line-height:1.6;position:relative}
.guide-body ul li::before{
content:'◈';color:var(--gold);font-size:0.55rem;position:absolute;left:0;top:0.7rem}
.guide-body ol{
counter-reset:guide-counter}
.guide-body ol li{
counter-increment:guide-counter}
.guide-body ol li::before{
content:counter(guide-counter);color:var(--gold);font-family:var(--serif);font-size:0.85rem;font-weight:500;position:absolute;left:0;top:0.5rem}
.vastu-box{
background:var(--dark);padding:2rem 2rem 2rem 1.75rem;margin:2rem 0;border-left:4px solid var(--gold);position:relative}
.vastu-box-label{
font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.75rem;display:flex;align-items:center;gap:0.5rem}
.vastu-box-label::before{
content:'✦'}
.vastu-box p{
font-family:var(--serif);font-size:1rem;color:rgba(255,255,255,0.85);line-height:1.8;font-style:italic;margin-bottom:0.5rem}
.vastu-box-attr{
font-size:0.72rem;color:var(--gold);font-weight:400;font-style:normal}
.insight-box{
background:rgba(201,169,110,0.06);border:1px solid rgba(201,169,110,0.25);padding:1.5rem;margin:2rem 0}
.insight-label{
font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:0.75rem;font-weight:400}
.insight-box p{
font-size:0.9rem;color:var(--text);line-height:1.8;font-weight:300;margin:0}
.guide-table-wrap{
overflow-x:auto;margin:1.5rem 0 2rem}
.guide-table{
width:100%;border-collapse:separate;border-spacing:0;font-size:0.88rem}
.guide-table thead tr th{
background:var(--dark);color:var(--gold);font-family:var(--sans);font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:400;padding:0.85rem 1.1rem;text-align:left;border:none}
.guide-table tbody tr td{
padding:0.85rem 1.1rem;border-bottom:1px solid var(--border);color:var(--text);font-weight:300;line-height:1.5;vertical-align:top}
.guide-table tbody tr:nth-child(even) td{
background:var(--cream-dk)}
.guide-table tbody tr:hover td{
background:rgba(201,169,110,0.05)}
.td-good{
color:#2d6a4f;font-weight:500}
.td-warn{
color:#a04000;font-weight:500}
.td-label{
font-weight:500;color:var(--dark)}
.guide-steps{
margin:1.5rem 0 2rem;display:flex;flex-direction:column;gap:1px;background:var(--border)}
.guide-step{
background:var(--white);padding:1.5rem;display:grid;grid-template-columns:48px 1fr;gap:1.25rem;align-items:start}
.step-num{
width:48px;height:48px;background:var(--dark);color:var(--gold);font-family:var(--serif);font-size:1.2rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-content h4{
font-family:var(--serif);font-size:1rem;color:var(--dark);font-weight:500;margin-bottom:0.35rem}
.step-content p{
font-size:0.88rem;color:var(--muted);font-weight:300;line-height:1.6;margin:0}
.guide-card-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--border);margin:1.5rem 0 2rem}
.guide-card{
background:var(--white);padding:1.5rem;transition:background 0.2s;position:relative}
.guide-card::before{
content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--gold);transition:height 0.3s}
.guide-card:hover::before{
height:100%}
.guide-card:hover{
background:var(--cream)}
.guide-card-icon{
font-size:1.5rem;margin-bottom:0.75rem;display:block}
.guide-card h4{
font-family:var(--serif);font-size:0.95rem;color:var(--dark);font-weight:500;margin-bottom:0.4rem}
.guide-card p{
font-size:0.8rem;color:var(--muted);font-weight:300;line-height:1.6;margin:0}
.colour-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;margin:1.5rem 0 2rem}
.colour-card{
text-align:center}
.colour-swatch{
width:100%;height:80px;margin-bottom:0.6rem;border:1px solid var(--border)}
.colour-name{
font-family:var(--serif);font-size:0.88rem;color:var(--dark);font-weight:400;margin-bottom:0.2rem}
.colour-vastu{
font-size:0.7rem;color:var(--gold);letter-spacing:0.06em;text-transform:uppercase}
.colour-desc{
font-size:0.75rem;color:var(--muted);font-weight:300;line-height:1.5;margin-top:0.3rem}
.do-dont{
display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);margin:1.5rem 0 2rem}
.do-col,.dont-col{
background:var(--white);padding:1.5rem}
.do-col h4{
font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:#2d6a4f;margin-bottom:1rem;display:flex;align-items:center;gap:0.4rem}
.dont-col h4{
font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:#c0392b;margin-bottom:1rem;display:flex;align-items:center;gap:0.4rem}
.do-col ul,.dont-col ul{
margin:0}
.do-col li::before{
color:#2d6a4f !important;content:'✓' !important;font-size:0.7rem !important}
.dont-col li::before{
color:#c0392b !important;content:'✗' !important;font-size:0.7rem !important}
.guide-cta-box{
background:var(--dark);padding:2.5rem;text-align:center;margin:2.5rem 0;position:relative;overflow:hidden}
.guide-cta-box::before{
content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(201,169,110,0.03) 0,rgba(201,169,110,0.03) 1px,transparent 1px,transparent 30px)}
.guide-cta-box>*{
position:relative}
.guide-cta-box .label{
color:var(--gold)}
.guide-cta-box h3{
font-family:var(--serif);font-size:1.3rem;color:var(--white);font-weight:400;margin:0.5rem 0 0.75rem;line-height:1.4}
.guide-cta-box p{
font-size:0.88rem;color:rgba(255,255,255,0.45);font-weight:300;margin-bottom:1.5rem;line-height:1.7}
.guide-cta-btns{
display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}
.key-takeaway{
border:2px solid var(--gold);padding:1.75rem;margin:2rem 0;position:relative}
.key-takeaway::before{
content:'Key Takeaway';font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);background:var(--cream);padding:0 0.5rem;position:absolute;top:-0.6rem;left:1rem}
.key-takeaway p{
font-family:var(--serif);font-size:1rem;color:var(--dark);line-height:1.8;font-weight:400;margin:0}
.guide-faq{
margin:2rem 0}
.faq-item{
border-bottom:1px solid var(--border)}
.faq-q{
font-family:var(--serif);font-size:1rem;color:var(--dark);font-weight:500;padding:1.1rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;user-select:none}
.faq-q::after{
content:'+';color:var(--gold);font-size:1.2rem;font-weight:300;flex-shrink:0;transition:transform 0.3s}
.faq-item.open .faq-q::after{
transform:rotate(45deg)}
.faq-a{
font-size:0.9rem;color:var(--muted);font-weight:300;line-height:1.8;padding-bottom:1.1rem;display:none}
.faq-item.open .faq-a{
display:block}
.related-guides{
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border);margin-top:3rem}
.related-card{
background:var(--white);padding:1.75rem;text-decoration:none;display:block;border-top:2px solid transparent;transition:all 0.2s}
.related-card:hover{
border-top-color:var(--gold);background:var(--cream)}
.related-cat{
font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem}
.related-title{
font-family:var(--serif);font-size:0.95rem;color:var(--dark);font-weight:400;line-height:1.4;margin-bottom:0.4rem}
.related-arrow{
font-size:0.72rem;color:var(--gold);letter-spacing:0.08em;text-transform:uppercase;margin-top:0.75rem;display:block}
.reading-progress{
position:fixed;top:0;left:0;width:0%;height:3px;background:var(--gold);z-index:200;transition:width 0.1s linear}
@media (max-width:900px){
.guide-wrap{
grid-template-columns:1fr;padding:2rem 1.25rem}
.guide-sidebar{
position:static;border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:1.5rem;margin-bottom:2rem}
.toc-list{
display:flex;flex-wrap:wrap;gap:0.25rem}
.toc-list a{
border-left:none;border:1px solid var(--border);font-size:0.72rem;padding:0.3rem 0.6rem}
.toc-list a:hover,.toc-list a.active{
border-color:var(--gold)}
.guide-body{
padding-left:0}
.do-dont{
grid-template-columns:1fr}
.guide-cta-btns{
flex-direction:column;align-items:center}
}
@media (max-width:600px){
.guide-hero-img,.guide-img-placeholder{
height:260px}
.guide-img-wrap img,.guide-img-wrap .img-placeholder{
height:220px}
.guide-card-grid{
grid-template-columns:1fr 1fr}
.colour-grid{
grid-template-columns:1fr 1fr}
}