/* ── THE ONE CREST & FOOTER — authoritative shell styling for every page of Sathya Yugam. Injected LAST in at serve-time (after each page's own styles), so these values always win: every page's header and footer render pixel-identical to the home page. Edit HERE, never per-page. ── */ nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px;padding:10px 16px;margin:0 0 10px; position:sticky;top:10px;z-index:60;border:1px solid rgba(230,200,140,.2);border-radius:16px; background:linear-gradient(180deg,rgba(8,12,18,.84),rgba(8,12,18,.62));backdrop-filter:blur(16px)} nav .mark{display:flex;align-items:center;gap:9px;color:#eef2ef;text-decoration:none;margin-right:auto; font:600 19px/1 "Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; letter-spacing:.4px} nav .mark .g{filter:drop-shadow(0 0 10px rgba(120,220,150,.7))} nav .mark small{display:block;font:600 8.5px/1 sans-serif;letter-spacing:2.2px;color:#93a6ac;opacity:.85; margin-top:3px;text-transform:uppercase} nav a.lnk{color:#93a6ac;text-decoration:none;transition:.2s;font-size:14px} nav a.lnk:hover{color:#e6bd63} nav a.lnk.on{color:#e6bd63} .wchip{white-space:nowrap;cursor:pointer;font:600 13px/1 inherit;color:#241804; border:1px solid rgba(255,236,180,.65);border-radius:999px;padding:9px 16px; background:linear-gradient(180deg,#f6dfa0,#d3a648);transition:.2s;margin-left:0} .wchip:hover{box-shadow:0 0 24px -6px rgba(230,189,99,.85)} .wchip.connected{background:rgba(230,189,99,.12);color:#f4d68a;border-color:rgba(230,189,99,.45)} .chipmenu{position:absolute;right:10px;top:calc(100% + 8px);z-index:70;min-width:214px; background:linear-gradient(180deg,rgba(10,14,20,.97),rgba(7,10,15,.97)); border:1px solid rgba(230,200,140,.2);border-radius:14px;padding:8px;backdrop-filter:blur(16px); box-shadow:0 18px 44px rgba(0,0,0,.55)} .chipmenu a{display:flex;gap:9px;align-items:center;padding:10px 12px;border-radius:9px; color:#eef2ef;font-size:13.5px;cursor:pointer;text-decoration:none;transition:.15s} .chipmenu a:hover{background:rgba(230,189,99,.1)} .cmwho{padding:6px 12px 9px;color:#93a6ac;border-bottom:1px solid rgba(230,200,140,.2);margin-bottom:6px; word-break:break-all;font:italic 12px/1.4 "Cormorant Garamond",Palatino,Georgia,serif} @media(max-width:560px){.wchip{padding:8px 12px;font-size:12px} nav a.lnk{font-size:13px} nav{gap:13px}} @media(max-width:700px){ /* the bar was only 62% opaque at its lower edge — page text read straight through the wordmark */ nav{flex-wrap:nowrap;overflow-x:auto;gap:14px;scrollbar-width:none; background:linear-gradient(180deg,rgba(8,12,18,.99),rgba(8,12,18,.975))} nav::-webkit-scrollbar{display:none} /* the crest was a 17px-tall tap target inside a 62px bar — give it a real 44px touch box */ nav .mark{position:sticky;left:-16px;padding-left:16px;padding-top:8px;padding-bottom:8px; min-height:44px;z-index:2;flex:0 0 auto; background:linear-gradient(90deg,rgba(8,12,18,.97) 76%,transparent)} nav a.lnk{flex:0 0 auto} .wchip{position:sticky;right:-16px;flex:0 0 auto;box-shadow:-16px 0 16px -8px rgba(8,12,18,.95)} } footer.sitefoot,.foot.sitefoot{display:block;text-align:left;margin-top:44px;margin-bottom:0;max-width:none; padding:26px clamp(16px,3vw,34px) 18px;border:1px solid rgba(230,200,140,.2);border-radius:18px; backdrop-filter:blur(14px);background:linear-gradient(180deg,rgba(9,13,19,.92),rgba(6,9,14,.95)); color:#93a6ac;font-size:12.5px} body>footer.sitefoot{max-width:1180px;margin-left:auto;margin-right:auto;margin-bottom:26px} .sitefoot .fq{text-align:center;color:#e8dcc0;margin-bottom:22px; font:italic 17px/1.7 "Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif} .sitefoot .fq span{display:block;color:#93a6ac;font-size:13px;margin-top:6px} .sitefoot .fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:0 auto; border-top:1px solid rgba(230,200,140,.2);padding-top:20px} .sitefoot .fcol h4{font:600 11px/1 sans-serif;letter-spacing:2.2px;text-transform:uppercase; color:#e3cb8f;margin:0 0 10px} .sitefoot .fcol a{display:block;color:#93a6ac;text-decoration:none;font-size:13px;line-height:2} .sitefoot .fcol a:hover{color:#e6bd63} .sitefoot .fnote2{display:block;color:#93a6ac;font-size:11.5px;line-height:1.7;margin-top:8px;opacity:.85} .sitefoot .fbase{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; border-top:1px solid rgba(230,200,140,.2);margin-top:20px;padding-top:14px;font-size:12.5px;color:#93a6ac} @media(max-width:680px){.sitefoot .fcols{grid-template-columns:1fr;gap:16px} .sitefoot .fbase{justify-content:center;text-align:center}} /* ── the four pillars of the footer (Ajin's mockup): icon shrines with the links kept beneath ── */ .sitefoot .fpillars{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1040px; margin:0 auto;border-top:1px solid rgba(230,200,140,.2);padding-top:24px} .sitefoot .fp{text-align:center;display:flex;flex-direction:column;align-items:center} .sitefoot .fpi{width:64px;height:64px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:27px;border:1px solid rgba(232,194,119,.5); background:radial-gradient(circle at 50% 38%,rgba(232,194,119,.14),rgba(10,12,18,.4)); box-shadow:0 0 26px -8px rgba(232,194,119,.75);margin-bottom:12px} .sitefoot .fp h4{font:600 11.5px/1 sans-serif;letter-spacing:2.4px;text-transform:uppercase; color:#e3cb8f;margin:0 0 8px} .sitefoot .fp p{color:#93a6ac;font:italic 12.5px/1.65 "Cormorant Garamond",Palatino,Georgia,serif; margin:0 0 10px;max-width:220px} .sitefoot .fplinks{display:flex;flex-direction:column;align-items:center} .sitefoot .fplinks a{display:block;color:#93a6ac;text-decoration:none;font-size:12.5px;line-height:1.95} .sitefoot .fplinks a:hover{color:#e6bd63} .sitefoot .fp .fnote2{max-width:230px;text-align:center;margin-top:10px} .sitefoot .fom{display:flex;align-items:center;justify-content:center;gap:14px;color:#e6bd63; font-size:20px;margin:26px 0 0} .sitefoot .fom span{font-size:10px;opacity:.7} .sitefoot .fom::before,.sitefoot .fom::after{content:"";width:min(150px,18vw);height:1px; background:linear-gradient(90deg,transparent,rgba(232,194,119,.5))} .sitefoot .fom::after{background:linear-gradient(90deg,rgba(232,194,119,.5),transparent)} @media(max-width:960px){.sitefoot .fpillars{grid-template-columns:1fr 1fr;gap:26px 18px}} @media(max-width:520px){.sitefoot .fpillars{grid-template-columns:1fr} /* a 220px cap inside a ~330px single column wasted a third of the width */ .sitefoot .fp p,.sitefoot .fp .fnote2{max-width:none}} /* ══ ONE CREST BAR ON EVERY PAGE ══ The long-form pages (/shiva, /studies/) narrow their wrapper to ~880px so the article reads well — but the nav lived inside that column too, so its 13 links wrapped onto TWO rows while every other page showed one. The bar now always spans the same 1100px band, centred, whatever width its page wrapper happens to be. Pages already at 1100 are untouched. (Percentage margins resolve against the parent's content width, so this re-centres rather than shifts; every ancestor was verified overflow-x:visible.) */ /* :not(.syrail) — the left-hand paths rail is ALSO a