/* Anubis28 v40 — complete temple pillars, symmetrical header plaques,
   and genuinely sculpted, centered home navigation stones.
   All app behavior, dataset, and approved palette remain unchanged. */
:root {
  --pillar-desktop-width: 128px;
}
/* Two equal-size stone plaques anchor the left and right extremes of the
   desert header. The logo remains a semantic Home button and retains focus. */
.topbar {
  min-height:139px;
  padding:10px 18px;
  background-position:center,center;
  background-size:cover,cover;
}
.topbar::after {
  display:block!important;
  content:"";
  position:absolute;
  top:9px;
  right:18px;
  width:117px;
  height:117px;
  z-index:0;
  border:0;
  opacity:1;
  border-radius:0;
  background:url('assets/decor/ankh-stone-plaque.png') center / contain no-repeat;
  box-shadow:none;
  pointer-events:none;
  filter:drop-shadow(0 3px 3px rgba(83,46,15,.28));
}
.brand {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  min-width:0;
  gap:10px;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
}
.brand-logo-plaque {
  box-sizing:border-box;
  display:flex;
  flex:0 0 117px;
  align-items:center;
  justify-content:center;
  width:117px;
  height:117px;
  background:url('assets/decor/anubis-logo-stone-plaque.png') center / contain no-repeat;
  filter:drop-shadow(0 3px 3px rgba(83,46,15,.28));
}
.brand-logo-plaque .brand-logo {
  width:91px;
  height:91px;
  max-width:91px;
  max-height:91px;
  object-fit:contain;
  filter:drop-shadow(1px 3px 2px rgba(78,34,10,.29));
}
.brand-text {
  font-size:clamp(29px,3.5vw,48px);
  white-space:nowrap;
}
.topbar-right {margin-right:128px;z-index:2}
/* The complete pillar image includes capital, carved shaft, fire basin,
   ankh pedestal and both natural edges. One illustration per side; never
   repeat a fragment, crop through a shaft or overlap interactive content. */
.content {
  --pillar-width:var(--pillar-desktop-width);
  max-width:1120px;
  margin-inline:auto;
  padding-inline:calc(var(--pillar-width) + 12px);
  position:relative;
  isolation:isolate;
}
.content::before, .content::after {
  display:block!important;
  content:"";
  position:absolute;
  top:5px;
  bottom:auto;
  width:var(--pillar-width);
  height:auto;
  aspect-ratio:202 / 879;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center top;
  pointer-events:none;
  opacity:1;
  z-index:0;
  border:0;
  filter:drop-shadow(3px 4px 5px rgba(57,31,11,.30));
}
.content::before {
  left:5px;
  background-image:url('assets/decor/full-temple-pillar-left.png');
}
.content::after {
  right:5px;
  background-image:url('assets/decor/full-temple-pillar-right.png');
  filter:drop-shadow(-3px 4px 5px rgba(57,31,11,.30));
}
.content > *{position:relative;z-index:1}
/* Centered carved menu slabs like the original approved Egyptian proposal. */
.home-temple{max-width:840px;margin-inline:auto}
.home-temple-intro{margin-bottom:5px;padding-bottom:7px}
.temple-nav-grid {
  width:100%;
  max-width:742px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:12px auto 16px;
}
.temple-nav-card {
  position:relative;
  box-sizing:border-box;
  aspect-ratio:1.02;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:20px 10px 18px;
  background-color:transparent;
  background-image:url('assets/decor/relief-stone-tile-cutout.png');
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  border:0;
  border-radius:22px;
  box-shadow:none;
  outline:0;
  color:var(--color-heading);
  filter:drop-shadow(0 4px 3px rgba(86,40,12,.31));
  transition:transform .16s ease,filter .16s ease;
}
.temple-nav-card::after{display:none!important;content:none!important}
.temple-nav-card img {
  width:57px;
  height:57px;
  object-fit:contain;
  filter:drop-shadow(1px 2px 1px rgba(112,64,18,.28));
}
.temple-nav-card span {
  font-family:var(--font-text-anubis);
  font-size:15px;
  font-weight:800;
  line-height:1.1;
  color:#532a11;
  letter-spacing:.005em;
  max-width:98%;
}
.temple-nav-card:hover{
  transform:translateY(-3px);
  filter:drop-shadow(0 8px 5px rgba(86,40,12,.34)) brightness(1.04);
}
.temple-nav-card:active{
  transform:translateY(2px);
  filter:drop-shadow(0 1px 2px rgba(86,40,12,.28)) brightness(.97);
}
.temple-nav-card:focus-visible{
  outline:3px solid #8b3c0c;
  outline-offset:-12px;
}
@media (max-width:1120px) and (min-width:801px) {
  .content{--pillar-width:106px;padding-inline:calc(var(--pillar-width) + 11px)}
  .topbar{min-height:121px}
  .brand-logo-plaque{width:100px;height:100px;flex-basis:100px}
  .brand-logo-plaque .brand-logo{width:77px;height:77px}
  .topbar::after{width:100px;height:100px;top:10px;right:18px}
  .topbar-right{margin-right:106px}
  .temple-nav-grid{gap:10px;max-width:660px}
  .temple-nav-card{padding:15px 7px}
}
@media (max-width:800px) and (min-width:601px) {
  .content{--pillar-width:70px;padding-inline:calc(var(--pillar-width) + 12px)}
  .topbar{min-height:106px;padding:7px 13px}
  .brand-logo-plaque{width:90px;height:90px;flex-basis:90px}
  .brand-logo-plaque .brand-logo{width:69px;height:69px}
  .topbar::after{width:90px;height:90px;top:7px;right:13px}
  .topbar-right{margin-right:94px}
  .brand-text{font-size:clamp(23px,3.8vw,33px)}
  .temple-nav-grid{gap:8px;max-width:560px}
  .temple-nav-card{padding:11px 4px;gap:5px}
  .temple-nav-card img{width:42px;height:42px}
  .temple-nav-card span{font-size:12px}
}
@media (max-width:600px) {
  /* Full-size pillars cannot coexist with two usable Memages columns on a
     phone, so the immersive framing stays on tablets and desktop. */
  .content{padding-inline:12px}
  .content::before,.content::after{display:none!important;content:none!important}
  .topbar{min-height:75px;padding:5px 8px}
  .brand{gap:5px}
  .brand-logo-plaque{width:66px;height:66px;flex-basis:66px}
  .brand-logo-plaque .brand-logo{width:49px;height:49px}
  .brand-text{font-size:clamp(21px,5.8vw,29px)}
  .topbar::after{display:block!important;top:5px;right:8px;width:66px;height:66px}
  .topbar-right{display:none}
  .temple-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;gap:8px}
  .temple-nav-card{aspect-ratio:1.05;min-height:130px;padding:10px 7px;gap:4px}
  .temple-nav-card img{width:46px;height:46px}
  .temple-nav-card span{font-size:13px}
}
@media(max-width:345px) {
  .brand-text{font-size:20px}
  .brand-logo-plaque{width:60px;height:60px;flex-basis:60px}
  .brand-logo-plaque .brand-logo{width:45px;height:45px}
  .topbar::after{width:60px;height:60px;top:7px}
  .temple-nav-card span{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.temple-nav-card{transition:none}}