/* =========================================================
   SNEHAKOOTA — SHARED NAVIGATION FOUNDATION
   Stage 2A / 2B / 2E-1 / 4B / 4C-1 / 4C-2 / 4D-2B
   ========================================================= */

/* =========================================================
   STAGE 2E-1 — REUSABLE NAVIGATION COMPONENT CONTRACT
   ========================================================= */
.sk-nav-edge-strip{position:fixed;left:0;top:0;bottom:0;width:var(--sk-edge-width,22px);background:var(--sk-edge-binding,#F5D9AE);border-right:1px solid var(--line-idle,rgba(43,33,24,.16));display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;z-index:20;cursor:pointer}
.sk-nav-edge-strip .sk-nav-ring{width:8px;height:8px;border-radius:50%;background:rgba(181,80,46,.4);transition:background .2s,transform .2s}
.sk-nav-edge-strip:hover .sk-nav-ring{background:rgba(181,80,46,.65)}
.sk-nav-backdrop{position:fixed;inset:0;background:var(--sk-overlay,rgba(43,33,24,.38));opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:30}
body.sk-nav-open .sk-nav-backdrop{opacity:1;pointer-events:auto}
.sk-nav-panel{position:fixed;left:0;top:0;bottom:0;width:76%;max-width:var(--sk-panel-max-width,300px);display:flex;z-index:31;transform:translateX(-100%);transition:transform .28s ease;box-shadow:var(--sk-shadow-panel,2px 0 18px rgba(0,0,0,.18))}
body.sk-nav-open .sk-nav-panel{transform:translateX(0)}
.sk-nav-panel .sk-nav-binding{width:var(--sk-edge-width,22px);background:var(--sk-edge-binding,#F5D9AE);border-right:1px solid var(--line-idle,rgba(43,33,24,.16));display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}
.sk-nav-panel .sk-nav-binding .sk-nav-ring{width:8px;height:8px;border-radius:50%;background:var(--rust,#B5502E)}
.sk-nav-panel .sk-nav-body{flex:1;background:var(--sky-bottom,#FDE7C8);padding:1.35rem 1.05rem 1.5rem;display:flex;flex-direction:column;height:100%}
.sk-nav-panel .sk-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.15rem;flex-shrink:0;padding-bottom:.8rem;border-bottom:1px solid var(--line-idle,rgba(43,33,24,.12))}
.sk-nav-panel .sk-nav-brand{font-family:var(--font-display,'Fraunces',serif);font-weight:600;font-size:1rem;line-height:1.1}
.sk-nav-panel .sk-nav-brand .sk-nav-sneha{color:var(--rust,#B5502E)}
.sk-nav-panel .sk-nav-brand .sk-nav-koota{color:var(--banyan,#2F5233)}
.sk-nav-panel .sk-nav-close{background:rgba(181,80,46,.08);border:1px solid rgba(181,80,46,.14);font-size:1rem;color:var(--ink-soft,#6B5C4C);cursor:pointer;line-height:1;padding:.3rem;border-radius:50%;min-width:var(--sk-touch-target,44px);min-height:var(--sk-touch-target,44px);display:flex;align-items:center;justify-content:center;transition:background .18s ease,color .18s ease,transform .18s ease}
.sk-nav-panel .sk-nav-close:hover{background:rgba(181,80,46,.14);color:var(--rust,#B5502E);transform:scale(1.03)}
.sk-nav-links{display:flex;flex-direction:column;gap:.22rem;flex:1;justify-content:center;margin-bottom:8vh}
.sk-nav-links a{display:flex;align-items:center;min-height:var(--sk-touch-target,44px);padding:.62rem .75rem;border-radius:10px;text-decoration:none;color:var(--ink,#2B2118);font-size:.95rem;font-family:var(--font-body,'Work Sans',sans-serif);line-height:1.25;border:1px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease}
.sk-nav-links a:hover{background:rgba(255,246,232,.48);border-color:rgba(181,80,46,.08)}
.sk-nav-links a.active{background:var(--sk-rust-soft,rgba(181,80,46,.10));color:var(--rust,#B5502E);font-weight:600;border-color:rgba(181,80,46,.12)}
.sk-nav-links a.disabled{color:var(--ink-soft,#6B5C4C);opacity:.55;pointer-events:none}
.sk-nav-links a .sk-nav-tag{font-size:.72rem;margin-left:.4em}

/* =========================================================
   STAGE 2A — SCROLLBAR VISUAL FOUNDATION
   ========================================================= */
html{scrollbar-width:thin;scrollbar-color:rgba(181,80,46,.28) transparent}
html::-webkit-scrollbar{width:7px;height:7px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:rgba(181,80,46,.26);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
html::-webkit-scrollbar-thumb:hover{background:rgba(181,80,46,.42);border:2px solid transparent;background-clip:padding-box}
html::-webkit-scrollbar-button{display:none;width:0;height:0}

/* =========================================================
   STAGE 2B — FIXED-ELEMENT POSITIONING FOUNDATION
   ========================================================= */
:root{--sk-nav-trigger-top:50vh;--sk-nav-trigger-width:20px;--sk-nav-trigger-height:48px;--sk-nav-trigger-safe-gap:12px}
.sk-nav-opener{position:fixed;left:0;top:var(--sk-nav-trigger-top,50vh);width:var(--sk-nav-trigger-width,20px);height:var(--sk-nav-trigger-height,48px);margin-top:calc(var(--sk-nav-trigger-height,48px)/-2);background:var(--rust,#B5502E);border-radius:0 8px 8px 0;box-shadow:var(--sk-shadow-soft,2px 2px 6px rgba(43,33,24,.18));z-index:32;cursor:pointer;border:none;padding:0;display:flex;align-items:center;justify-content:center;animation:skNavTabNudge 2.4s ease-in-out 1s 3;-webkit-tap-highlight-color:transparent}
.sk-nav-opener::after{content:'';width:4px;height:4px;border-radius:50%;background:rgba(255,246,232,.9);box-shadow:0 -7px rgba(255,246,232,.9),0 7px rgba(255,246,232,.9),7px -7px rgba(255,246,232,.9),7px 0 rgba(255,246,232,.9),7px 7px rgba(255,246,232,.9);transform:translateX(-3.5px)}
.sk-nav-opener.sk-nav-pulsing::before{content:'';position:absolute;inset:0;border-radius:0 8px 8px 0;box-shadow:0 0 0 0 rgba(181,80,46,.5);animation:skNavTabPulse 2.2s ease-out infinite}
@keyframes skNavTabPulse{0%{box-shadow:0 0 0 0 rgba(181,80,46,.45)}70%{box-shadow:0 0 0 10px rgba(181,80,46,0)}100%{box-shadow:0 0 0 0 rgba(181,80,46,0)}}
@keyframes skNavTabNudge{0%,100%{transform:translateX(0)}10%{transform:translateX(4px)}20%{transform:translateX(0)}30%{transform:translateX(4px)}40%{transform:translateX(0)}}

/* =========================================================
   STAGE 2B-1 / 2B-2 — LEGACY TRIGGER BRIDGE
   ---------------------------------------------------------
   Kept only as a compatibility adapter for any page that may still
   contain legacy markup during migration. Index is expected to remove
   these nodes at runtime before the shared NAV is created.
   ========================================================= */
button.bookmark-tab{left:0;top:var(--sk-nav-trigger-top,50vh);width:var(--sk-nav-trigger-width,20px);height:var(--sk-nav-trigger-height,48px);margin-top:calc(var(--sk-nav-trigger-height,48px)/-2);background:var(--rust,#B5502E);border-radius:0 8px 8px 0;box-shadow:var(--sk-shadow-soft,2px 2px 6px rgba(43,33,24,.18));z-index:32;animation:skNavTabNudge 2.4s ease-in-out 1s 3;transition:opacity .22s ease,transform .28s ease,visibility .22s ease)}
button.bookmark-tab::after{content:'';width:4px;height:4px;border-radius:50%;background:rgba(255,246,232,.9);box-shadow:0 -7px rgba(255,246,232,.9),0 7px rgba(255,246,232,.9),7px -7px rgba(255,246,232,.9),7px 0 rgba(255,246,232,.9),7px 7px rgba(255,246,232,.9);transform:translateX(-3.5px)}
.bookmark-tab.pulsing::before{border-radius:0 8px 8px 0;box-shadow:0 0 0 0 rgba(181,80,46,.5);animation:skNavTabPulse 2.2s ease-out infinite}

/* Legacy panel / edge-strip adapters */
html body .backdrop{position:fixed!important;inset:0!important;background:var(--sk-overlay,rgba(43,33,24,.38))!important;transition:opacity .25s ease!important;z-index:30!important}
html body.nav-open .backdrop{opacity:1!important;pointer-events:auto!important}
html body:not(.nav-open) .backdrop{opacity:0!important;pointer-events:none!important}
html body .side-panel{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:76%!important;max-width:var(--sk-panel-max-width,300px)!important;display:flex!important;z-index:31!important;transform:translateX(-100%)!important;transition:transform .28s ease!important;box-shadow:var(--sk-shadow-panel,2px 0 18px rgba(0,0,0,.18))!important}
html body.nav-open .side-panel{transform:translateX(0)!important}
html body .side-panel .binding{width:var(--sk-edge-width,22px)!important;background:var(--sk-edge-binding,#F5D9AE)!important;border-right:1px solid var(--line-idle,rgba(43,33,24,.16))!important}
html body .side-panel .binding .ring{width:8px!important;height:8px!important;border-radius:50%!important;background:var(--rust,#B5502E)!important}
html body .side-panel .panel-body{flex:1!important;background:var(--sky-bottom,#FDE7C8)!important;padding:1.35rem 1.05rem 1.5rem!important;display:flex!important;flex-direction:column!important;height:100%!important}
html body .side-panel .panel-top{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:1.15rem!important;flex-shrink:0!important;padding-bottom:.8rem!important;border-bottom:1px solid var(--line-idle,rgba(43,33,24,.12))!important}
html body .side-panel .closer{min-width:var(--sk-touch-target,44px)!important;min-height:var(--sk-touch-target,44px)!important;background:rgba(181,80,46,.08)!important;border:1px solid rgba(181,80,46,.14)!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body .panel-links{display:flex!important;flex-direction:column!important;gap:.22rem!important;flex:1!important;justify-content:center!important;margin-bottom:8vh!important}
html body .panel-links a{display:flex!important;align-items:center!important;min-height:var(--sk-touch-target,44px)!important;padding:.62rem .75rem!important;border-radius:10px!important;color:var(--ink,#2B2118)!important;font-family:var(--font-body,'Work Sans',sans-serif)!important;text-decoration:none!important;border:1px solid transparent!important;line-height:1.25!important;transition:background .18s ease,color .18s ease,border-color .18s ease!important}
html body .panel-links a:hover{background:rgba(255,246,232,.48)!important;border-color:rgba(181,80,46,.08)!important}
html body .panel-links a.active{background:var(--sk-rust-soft,rgba(181,80,46,.10))!important;color:var(--rust,#B5502E)!important;font-weight:600!important;border-color:rgba(181,80,46,.12)!important}
html body .panel-links a.disabled{color:var(--ink-soft,#6B5C4C)!important;opacity:.55!important}
html body .edge-strip{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:var(--sk-edge-width,22px)!important;background:var(--sk-edge-binding,#F5D9AE)!important;border-right:1px solid var(--line-idle,rgba(43,33,24,.16))!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:space-evenly!important;z-index:20!important;cursor:pointer!important}
html body .edge-strip .ring{width:8px!important;height:8px!important;border-radius:50%!important;background:rgba(181,80,46,.4)!important;transition:background .2s,transform .2s!important}
html body .edge-strip:hover .ring{background:rgba(181,80,46,.65)!important}

/* =========================================================
   STAGE 4B-2 — OPEN-STATE NAV TRIGGER HANDOFF
   ========================================================= */
body.nav-open button.bookmark-tab{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-110%)}
body.sk-nav-open .sk-nav-opener{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-110%)}

/* =========================================================
   STAGE 4B-3 — MOBILE-SAFE NAV TRIGGER
   ========================================================= */
@media (max-width:700px){
  :root{--sk-nav-trigger-width:24px;--sk-nav-trigger-height:52px}
  button.bookmark-tab{width:var(--sk-nav-trigger-width,24px);height:var(--sk-nav-trigger-height,52px)}
}

/* =========================================================
   STAGE 4C-1 — NAV PANEL VISUAL HIERARCHY
   ========================================================= */
.sk-nav-panel .sk-nav-top{padding-bottom:.8rem;border-bottom:1px solid var(--line-idle,rgba(43,33,24,.12))}
.sk-nav-panel .sk-nav-close{background:rgba(181,80,46,.08);border:1px solid rgba(181,80,46,.14);border-radius:50%;min-width:var(--sk-touch-target,44px);min-height:var(--sk-touch-target,44px);display:flex;align-items:center;justify-content:center}
.sk-nav-panel .sk-nav-links{gap:.22rem}
.sk-nav-panel .sk-nav-links a{min-height:var(--sk-touch-target,44px);padding:.62rem .75rem;border:1px solid transparent;line-height:1.25;transition:background .18s ease,color .18s ease,border-color .18s ease}
.sk-nav-panel .sk-nav-links a:hover{background:rgba(255,246,232,.48);border-color:rgba(181,80,46,.08)}
.sk-nav-panel .sk-nav-links a.active{border-color:rgba(181,80,46,.12)}

/* =========================================================
   STAGE 4C-2 — SHARED NAVIGATION ICON PRESENTATION
   ---------------------------------------------------------
   Icons are visual-only at this stage. They do not change destinations
   or navigation behaviour. The icon column is shared by the semantic
   NAV markup and the legacy Index bridge.
   ========================================================= */
.sk-nav-links a::before,
html body .panel-links a::before{content:'';width:21px;height:21px;flex:0 0 21px;margin-right:.72rem;display:inline-block;background-repeat:no-repeat;background-position:center;background-size:18px 18px;opacity:.72;transition:opacity .18s ease,transform .18s ease}
.sk-nav-links a:hover::before,
.sk-nav-links a.active::before,
html body .panel-links a:hover::before,
html body .panel-links a.active::before{opacity:1}

/* Home / SnehaKoota */
.sk-nav-links a[href="index.html"]::before,
html body .panel-links a[href="index.html"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2118' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.8 12 3l9 7.8'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E")}

/* Journey / Story — winding road */
.sk-nav-links a[href="story.html"]::before,
html body .panel-links a[href="story.html"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2118' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 22C8.5 18 8.2 15.4 6.7 12.9 5.2 10.4 5.2 7.4 7.3 4.2'/%3E%3Cpath d='M17 22c-1.5-4-1.2-6.6.3-9.1 1.5-2.5 1.5-5.5-.6-8.7'/%3E%3Cpath d='M9.2 3.8c1.9-.8 3.7-.8 5.6 0'/%3E%3Cpath d='M10 9.2h4M9.2 14.8h5.6' opacity='.7'/%3E%3C/svg%3E")}

/* Samparka / people */
.sk-nav-links a[href="samparka.html"]::before,
html body .panel-links a[href="samparka.html"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2118' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 20c.6-3.3 2.5-5 5.5-5s4.9 1.7 5.5 5'/%3E%3Cpath d='M16 6.5a2.7 2.7 0 0 1 0 5.2M17 15c2 .3 3.3 1.7 3.7 4'/%3E%3C/svg%3E")}

/* Future Gallery */
.sk-nav-links a[href="#"]:nth-child(5)::before,
html body .panel-links a[href="#"]:nth-child(5)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2118' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9' r='1.5'/%3E%3Cpath d='m21 15-4.5-4.5L10 17l-2.5-2.5L3 19'/%3E%3C/svg%3E")}

/* Future Contact */
.sk-nav-links a[href="#"]:nth-child(6)::before,
html body .panel-links a[href="#"]:nth-child(6)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2118' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v11H7l-3 3v-14Z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E")}

/* Active icon follows the active text colour. */
.sk-nav-links a.active::before,
html body .panel-links a.active::before{filter:sepia(1) saturate(5) hue-rotate(330deg)}

/* Baraha / elegant writing */
.sk-nav-links a[data-sk-baraha]::before,
html body .panel-links a[data-sk-baraha]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2118' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h10.2A2.8 2.8 0 0 1 17 7.3v12.2H7a3 3 0 0 0-3 3V4.5Z'/%3E%3Cpath d='M7 19.5h10'/%3E%3Cpath d='m14.2 7.1 2.2-2.2 2.7 2.7-2.2 2.2-2.7-2.7Z'/%3E%3Cpath d='m10.2 11.1 4-4'/%3E%3Cpath d='m13.7 10.1-1 1.9-1.9 1'/%3E%3C/svg%3E");width:21px;height:21px;flex-basis:21px;margin-right:.72rem;border:0;border-radius:0;box-sizing:border-box;transform:none;opacity:.72}
.sk-nav-links a[data-sk-baraha]:hover::before,
.sk-nav-links a[data-sk-baraha].active::before,
html body .panel-links a[data-sk-baraha]:hover::before,
html body .panel-links a[data-sk-baraha].active::before{opacity:1}

@media (prefers-reduced-motion:reduce){.sk-nav-opener,.sk-nav-opener.sk-nav-pulsing::before,button.bookmark-tab,.bookmark-tab.pulsing::before{animation:none}.sk-nav-panel,.sk-nav-backdrop,.sk-nav-opener,.bookmark-tab{transition:none}}