:root {
            /* COLOR TOKENS */
            --navy: #002147; 
            --ivory: #FFFDD0; 
            --white: #ffffff;
            --saffron: #FF9933; 

            /* ARCHITECTURAL TOKENS */
            --cmd-size: 9vh;
            --nav-bottom-clearance: 8rem;

            /* FLUID SPACING */
            --beam-gap-fluid: clamp(0.75rem, 1.25rem, 2rem);
            --pillar-padding-v: clamp(2rem, 3rem, 5rem);

/* MOTION STRATEGY */
    --ticker-speed: 90s; /* A slow, meditative pace */
        }

        /* RESET & BASE */
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background-color: var(--ivory);
            line-height: 1.6;
        }

        /* IMAGE & FIGURE STYLING */
        figure {
            margin: 2rem auto;
            text-align: center;
            max-width: 100%;
        }

        figure img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        figcaption {
            margin-top: 1rem;
            font-style: italic;
            text-align: center;
        }

        /* DOCKING LOGIC (The Safety Zone) */
        body[data-dock="top"] { padding-top: var(--cmd-size); padding-bottom: 0; }
        body[data-dock="bottom"] { padding-bottom: var(--cmd-size); padding-top: 0; }

        /* THEME ARCHITECTURE */
        .light-theme { --theme-bg: var(--ivory); --theme-fg: var(--navy); --theme-accent: var(--saffron); background-color: var(--theme-bg); color: var(--theme-fg); }
        .vibrant-theme { --theme-bg: var(--saffron); --theme-fg: var(--navy); --theme-accent: var(--ivory); background-color: var(--theme-bg); color: var(--theme-fg); }
        .dark-theme { --theme-bg: var(--navy); --theme-fg: var(--ivory); --theme-accent: var(--white); background-color: var(--theme-bg); color: var(--theme-fg); }

        /* FIXED COMMAND BAR */
        #command-bar {
            position: fixed;
            left: 0;
            width: 100%;
            height: var(--cmd-size);
            z-index: 100;
            box-sizing: border-box;
            display: flex;
            align-items: center; 
            justify-content: center;
            gap: var(--beam-gap-fluid);
            padding: 0 5%;
        }

        body[data-dock="top"] #command-bar { top: 0; bottom: auto; border-bottom: 2px solid var(--theme-fg); }
        body[data-dock="bottom"] #command-bar { bottom: 0; top: auto; border-top: 2px solid var(--theme-fg); }

        /* CONTENT VIEWPORT */
        #main-content-viewport {
            transition: opacity 0.3s ease-in-out;
            outline: none; /* Removes visual ring on the container when focused */
        }

        .nav-btn {
            padding: 0.5rem 1rem;
            cursor: pointer;
            font-size: 1.2rem;
            background: transparent;
            color: inherit;
            border: 1px solid currentColor;
            display: flex;
            align-items: center;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }
    
/* pillar and beams*/

/* .pillar-column (The vertical holder)
   Purpose: Vertical stacking of content. 
*/
.pillar-column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-bottom-clearance);
    font-size: 100%; /* Respects browser default (usually 16px) */
}

body {
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
}

/* Specific Pillar implementation for Navigation */
#nav-pillar {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Applying Pillar spacing to page sections */
section {
    padding: var(--pillar-padding-v) 10%;
    border-bottom: 1px solid #eee;
}

section h2 {
    text-align: center;
}

/* .beam-row (The horizontal holder)
   Purpose: Horizontal distribution of elements. 
   Includes flex-wrap for natural responsiveness.
*/
.beam-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--beam-gap-fluid);
    padding: 1rem 5%;
}

/* Beam-specific list styling */
.ul-without-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* INTERACTIVE STATES */
a, a:visited { 
    color: var(--theme-fg); 
    text-decoration: none; 
    transition: opacity 0.2s ease; 
}

a:hover { 
    opacity: 0.7; 
    text-decoration: underline; 
}

a:focus { 
    outline: 2px solid var(--theme-accent); 
    outline-offset: 4px; 
}

::selection { 
    background-color: var(--theme-fg); 
    color: var(--theme-bg);
}

/* ul bullet formatting */

.ul-without-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Use this for architectural, structured lists in Content Sections */
.ul-with-square-bullets {
    list-style-type: square;
    padding-left: 1.5rem; 
    margin: 1rem 0;
}
 
/* tiruman related styles */
/* HEADER & ASSETS */
.symbol-box {
    background-color: transparent;
    padding: 2rem 0;
    text-align: center;
}

.sacred-symbol {
    height: clamp(5rem, 8rem, 10rem);
    aspect-ratio: 1 / 1; /* Reserved space to prevent Layout Shift */
    display: block;
    margin: 0 auto;
}




/* ticker related*/
/* TICKER ANIMATION */

/* The outer container that clips the moving text */
.ticker-wrap {
    overflow: hidden;
    white-space: nowrap; /* Prevents text from wrapping to a second line */
    border-top: 1px solid var(--ivory);
}

/* The moving element containing the text */
.ticker-content {
    display: inline-block;
    padding-left: 100%; /* Forces the text to start off-screen to the right */
    animation: ticker-move var(--ticker-speed) linear infinite;
}

/* The Hardware-Accelerated Keyframes */
@keyframes ticker-move {
    0% { 
        transform: translate3d(0, 0, 0); 
    }
    100% { 
        /* Moves the content entirely to the left */
        transform: translate3d(-100%, 0, 0); 
    }
}


/*
<div class="ticker-wrap dark-theme">
    <div class="ticker-content">
        PAST EVENTS • UPCOMING RITUALS • COMMUNITY NOTICES • SACRED CALENDAR • 
    </div>
</div>
*/