@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--navy:#06162b;--navy2:#0b2238;--gold:#d9a92f;--gold2:#f5dda0;--ink:#201b15;--cream:#f3ead4;--max:1280px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}a{text-decoration:none;color:inherit}.container{width:min(var(--max),94%);margin:auto}.topline{height:4px;background:linear-gradient(90deg,var(--navy),var(--gold),var(--navy))}
.site-header{background:#06162b;color:var(--gold2);position:relative;z-index:20;border-bottom:1px solid #a77918}.site-header:before{content:"";position:absolute;inset:0;opacity:.22;background-image:radial-gradient(circle at 10px 10px,transparent 0 7px,rgba(217,169,47,.18) 8px 9px,transparent 10px),radial-gradient(circle at 28px 28px,transparent 0 7px,rgba(217,169,47,.12) 8px 9px,transparent 10px);background-size:38px 38px;pointer-events:none}.nav{min-height:118px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}.brand{display:flex;align-items:center;gap:15px;min-width:350px}.brand img{width:78px;height:78px;object-fit:cover;border-radius:50%;border:2px solid var(--gold)}.brand-title{font-family:Cinzel,Georgia,serif;font-size:1.55rem;letter-spacing:.05em;color:#f0c45a}.brand-sub{display:block;font-family:Cinzel,Georgia,serif;font-size:.78rem;letter-spacing:.15em;margin-top:4px;color:#e5b64b}.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:25px;font-family:Cinzel,Georgia,serif;font-size:.78rem;white-space:nowrap}.nav-links a{padding:8px 0;color:#f0d37d}.nav-links a:hover{color:#fff}.languages{margin-left:6px;color:#f0d37d;font-size:.8rem}.gold-rule{height:20px;position:relative;border-top:1px solid var(--gold);margin-top:0}.gold-rule span{position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:#06162b;color:var(--gold);padding:0 16px;font-size:16px}.menu{display:none;background:none;border:0;color:var(--gold);font-size:1.7rem}
.manuscript-section{background:#071b2e;padding:10px 0 0;border-bottom:1px solid var(--gold);position:relative}.manuscript-frame{width:min(1320px,96%);margin:auto;overflow:hidden}.manuscript-frame img{display:block;width:100%;height:auto;object-fit:contain;object-position:center center}.manuscript-caption{text-align:center;font-family:Cinzel,Georgia,serif;color:#f1d278;letter-spacing:.12em;font-size:.72rem;padding:5px 0 7px}
.landing-hero{position:relative;width:100%;overflow:hidden;background:#07182a}.hero-inner{position:relative;width:100%}.hero-inner>img{display:block;width:100%;height:auto}.hero-motes{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}.hero-hotspot{position:absolute;z-index:2}.hero-hotspot a{display:block;width:100%;height:100%}.hero-books{left:1.3%;top:5%;width:16.5%;height:89%}.hero-enter{left:26.5%;top:70%;width:22%;height:18%}.hero-video{right:1.3%;top:5%;width:16.5%;height:89%}
.gateway-section{background:#071b2e;color:#fff;border-top:1px solid var(--gold);border-bottom:1px solid rgba(217,169,47,.35);padding:10px 0}.gateways{display:grid;grid-template-columns:repeat(4,1fr)}.gateway{min-height:108px;display:flex;align-items:center;gap:15px;padding:12px 18px;border-right:1px solid rgba(217,169,47,.16);background:linear-gradient(90deg,rgba(255,255,255,.01),rgba(217,169,47,.025))}.gateway:last-child{border-right:0}.gateway-icon{flex:0 0 70px;width:70px;height:70px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:#f1c85e;font-size:2rem;font-family:Georgia,serif;background:#09213a}.gateway strong{display:block;font-family:Cinzel,Georgia,serif;color:#f2d179;font-size:1rem;letter-spacing:.04em}.gateway small{display:block;color:#e5e9ee;font-size:.78rem;line-height:1.45;margin:3px 0 4px}.gateway em{font-style:normal;color:#f2bd38;font-size:.7rem;font-weight:700;letter-spacing:.08em}
.heritage-section{background:#f1e4c7;position:relative;border-bottom:1px solid #d1bd8f;padding:22px 0}.heritage-section:before{content:"";position:absolute;inset:0;opacity:.22;background:linear-gradient(90deg,rgba(91,63,24,.08),transparent 30%,transparent 70%,rgba(91,63,24,.08));pointer-events:none}.heritage-grid{display:grid;grid-template-columns:repeat(3,1fr)}.heritage-grid article{display:flex;align-items:center;gap:16px;padding:10px 28px;border-right:1px solid rgba(107,78,35,.22)}.heritage-grid article:last-child{border-right:0}.heritage-symbol{font-family:Georgia,serif;font-size:3.2rem;color:#3d3323;min-width:58px;text-align:center}.heritage-grid h2{font-family:Cinzel,Georgia,serif;font-size:1rem;margin:0 0 4px;color:#2d271e}.heritage-grid p{margin:0;font-size:.82rem;line-height:1.5;color:#443b2c}.quiet-links{padding:55px 0;background:#f7f1e3}.quiet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.quiet-grid a{border:1px solid #d5c39a;padding:25px;background:#fbf8f0}.quiet-grid span{display:block;font-family:Cinzel,Georgia,serif;color:#624b18;font-size:1rem;letter-spacing:.08em}.quiet-grid small{display:block;color:#665f53;margin-top:7px}
footer{background:#040d1a;color:#cfd7e4;padding:38px 0 20px;border-top:3px solid var(--gold)}footer h3{font-family:Cinzel,Georgia,serif;color:#f4d47c;font-size:1rem;margin:0 0 8px}footer p{margin:0;font-size:.82rem}footer a{color:#d5deeb}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:35px}.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:25px;padding-top:15px;text-align:center;font-size:.75rem;color:#8793a5}
@media(max-width:1200px){.nav-links{gap:16px;font-size:.7rem}.brand{min-width:310px}.brand img{width:68px;height:68px}.brand-title{font-size:1.25rem}.brand-sub{font-size:.65rem}.gateway{padding:10px 12px}.gateway-icon{flex-basis:60px;width:60px;height:60px;font-size:1.7rem}}
@media(max-width:980px){.manuscript-frame img{height:auto}.nav{min-height:86px}.nav-links{display:none;position:absolute;left:0;right:0;top:86px;background:#06162b;padding:18px 5%;flex-direction:column;align-items:flex-start;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}.nav-links.open{display:flex}.menu{display:block}.brand{min-width:0}.brand img{width:58px;height:58px}.gateway-section{padding:0}.gateways{grid-template-columns:repeat(2,1fr)}.gateway:nth-child(2){border-right:0}.gateway:nth-child(-n+2){border-bottom:1px solid rgba(217,169,47,.16)}.heritage-grid{grid-template-columns:1fr}.heritage-grid article{border-right:0;border-bottom:1px solid rgba(107,78,35,.18)}.heritage-grid article:last-child{border-bottom:0}.quiet-grid{grid-template-columns:1fr 1fr}.hero-books,.hero-video{top:5%;height:90%}}
@media(max-width:620px){.manuscript-frame img{height:auto}.brand-title{font-size:1rem}.brand-sub{font-size:.5rem;letter-spacing:.1em}.languages{display:none}.manuscript-caption{font-size:.55rem}.gateway{min-height:100px}.gateway-icon{flex-basis:52px;width:52px;height:52px;font-size:1.4rem}.gateway strong{font-size:.78rem}.gateway small{font-size:.68rem}.gateway em{font-size:.58rem}.quiet-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.hero-enter{left:25%;width:27%;top:70%;height:19%}}

/* Below ~640px the hero and manuscript banners are wide flat marketing images —
   shrinking them to full viewport width squeezes their baked-in text to an
   unreadable sliver. Instead, hold them at a fixed readable height and let the
   full-width image scroll horizontally, so every word stays legible on a phone. */
@media(max-width:640px){
  .landing-hero{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hero-inner{width:auto;display:inline-block;vertical-align:top}
  .hero-inner>img{width:auto;max-width:none;height:280px}
  .hero-books,.hero-video{top:5%;height:90%}
  .hero-enter{left:25%;width:27%;top:70%;height:19%}
  .manuscript-section{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .manuscript-frame{width:auto;max-width:none;margin:0;display:inline-block}
  .manuscript-frame img{width:auto;max-width:none;height:150px}
}
@media(max-width:420px){
  .hero-inner>img{height:220px}
  .manuscript-frame img{height:120px}
}

/* ===== Sacred atmosphere ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in-view{opacity:1;transform:none}

@media(prefers-reduced-motion:no-preference){
  .site-header:before{animation:mandalaSpin 160s linear infinite}
  @keyframes mandalaSpin{to{transform:rotate(360deg)}}

  .landing-hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse 32% 62% at 58% 52%,rgba(245,221,160,.55),rgba(245,221,160,0) 70%);animation:auraPulse 6.5s ease-in-out infinite}
  @keyframes auraPulse{0%,100%{opacity:.45}50%{opacity:1}}

  .hero-motes span{position:absolute;bottom:-4%;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fbedc4,rgba(251,237,196,0) 72%);mix-blend-mode:screen;animation:moteRise 10s linear infinite}
  @keyframes moteRise{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:1}88%{opacity:.4}100%{transform:translateY(-92%) scale(1);opacity:0}}

  .hero-incense{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
  .hero-incense span{position:absolute;top:58%;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,rgba(226,221,205,.6),rgba(226,221,205,0) 72%);filter:blur(1.5px);mix-blend-mode:screen;animation:incenseRise 9s ease-in infinite}
  @keyframes incenseRise{0%{transform:translate(0,0) scale(.5) rotate(0deg);opacity:0}10%{opacity:.5}50%{transform:translate(10px,-95px) scale(1.7) rotate(10deg);opacity:.3}100%{transform:translate(-6px,-200px) scale(2.6) rotate(-8deg);opacity:0}}

  .hero-raylight{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,rgba(255,235,190,0) 40%,rgba(255,235,190,.16) 48%,rgba(255,235,190,0) 56%);background-size:260% 260%;animation:rayDrift 14s ease-in-out infinite}
  @keyframes rayDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

  footer .footer-grid>div:first-child h3{position:relative;padding-left:20px}
  footer .footer-grid>div:first-child h3:before{content:"";position:absolute;left:0;top:1px;width:8px;height:12px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(180deg,#ffe3a3,#ff9d3f 58%,#d9591b);box-shadow:0 0 7px 2px rgba(255,157,63,.55);transform-origin:50% 90%;animation:flameFlicker 2.4s ease-in-out infinite}
  @keyframes flameFlicker{0%,100%{transform:scaleY(1) rotate(0deg)}30%{transform:scaleY(.9) rotate(-3deg)}55%{transform:scaleY(1.08) rotate(3deg)}80%{transform:scaleY(.95) rotate(-1deg)}}
}

/* ===== Inner pages (About Bogar, Journeys, etc.) — same sacred language as the home page ===== */
.page-hero{background:#06162b;color:#f3ead4;position:relative;padding:64px 0 54px;overflow:hidden;border-bottom:1px solid var(--gold)}
.page-hero:before{content:"";position:absolute;inset:0;opacity:.2;background-image:radial-gradient(circle at 10px 10px,transparent 0 7px,rgba(217,169,47,.18) 8px 9px,transparent 10px),radial-gradient(circle at 28px 28px,transparent 0 7px,rgba(217,169,47,.12) 8px 9px,transparent 10px);background-size:38px 38px;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.page-hero:before{animation:mandalaSpin 160s linear infinite}}
.page-hero .container{position:relative}
.page-hero .eyebrow{display:block;font-family:Cinzel,Georgia,serif;color:var(--gold);letter-spacing:.2em;font-size:.72rem;margin-bottom:12px}
.page-hero h1{font-family:Cinzel,Georgia,serif;color:#f5dda0;font-size:2.3rem;letter-spacing:.02em;margin:0 0 14px}
.page-hero p{max-width:640px;color:#d8dee8;font-size:1rem;line-height:1.7;margin:0}
.section.white{background:var(--cream);padding:52px 0 60px}
.content{max-width:740px;margin:auto}
.content h2{font-family:Cinzel,Georgia,serif;color:#3d3323;font-size:1.35rem;letter-spacing:.01em;margin:36px 0 12px}
.content h2:first-child{margin-top:0}
.content p{color:#4a4232;line-height:1.75;margin:0 0 16px;font-size:.98rem}
.notice{background:#fbf3de;border:1px solid var(--gold);border-left:4px solid var(--gold);padding:16px 22px;color:#5b4a1e;font-size:.92rem;line-height:1.6;margin:22px 0}
.notice strong{color:#8a6410;font-family:Cinzel,Georgia,serif;letter-spacing:.03em}
@media(max-width:620px){.page-hero{padding:46px 0 40px}.page-hero h1{font-size:1.7rem}.section.white{padding:38px 0 44px}}

/* Shared header treatment: inner pages use the same deep navy patterned background as the landing page. */
body:not(.home-page) > header{background:#06162b;color:var(--gold2);position:relative;z-index:20;border-bottom:1px solid #a77918;}
body:not(.home-page) > header:before{content:"";position:absolute;inset:0;opacity:.22;background-image:radial-gradient(circle at 10px 10px,transparent 0 7px,rgba(217,169,47,.18) 8px 9px,transparent 10px),radial-gradient(circle at 28px 28px,transparent 0 7px,rgba(217,169,47,.12) 8px 9px,transparent 10px);background-size:38px 38px;pointer-events:none;}
body:not(.home-page) > header .nav{position:relative;}
body:not(.home-page) > header .nav-links a{color:#f0d37d;}
body:not(.home-page) > header .nav-links a:hover{color:#fff;}
body:not(.home-page) > header:after{content:"";display:block;height:20px;border-top:1px solid var(--gold);margin-top:0;}