/* ANUBIS28 v38 — carved temple material pass.
   Real stone texture and pilaster assets are derived from the explicitly approved
   Egyptian art mockup; only visual surface properties change. */
:root {
  --temple-photo-wall: url('assets/textures/temple-stone-wall.webp');
  --temple-photo-panel: url('assets/textures/carved-limestone.webp');
  --temple-photo-button: url('assets/decor/relief-stone-button.png');
  --temple-photo-panorama: url('assets/decor/desert-sunrise-panorama.webp');
  --temple-chisel-shadow: rgba(72,35,9,.32);
}
html, body {
  background-color: #bd844a;
  background-image:linear-gradient(rgba(106,58,24,.13),rgba(101,52,14,.25)), var(--temple-photo-wall);
  background-size:cover,540px 540px;
}
.app-shell {
  position:relative;
  isolation:isolate;
  background:#d9a66d var(--temple-photo-wall) repeat;
  background-size:540px 540px;
  border-left:6px ridge #ad7238;
  border-right:6px ridge #ad7238;
  box-shadow:0 5px 0 #6c3f21,0 14px 65px rgba(66,28,7,.43);
}
/* v37 pilasters were underneath the opaque content layer; remove them. */
.app-shell::before,.app-shell::after {content:none!important;display:none!important}
.topbar {
  min-height:126px;
  padding:16px 25px;
  border-bottom:7px ridge #c18642;
  background-color:#efc58b;
  background-image:
    linear-gradient(90deg,rgba(255,238,199,.23),rgba(255,245,211,.09) 49%,rgba(217,155,81,.08)),
    var(--temple-photo-panorama);
  background-position:center,center center;
  background-size:cover,cover;
  box-shadow:inset 0 2px rgba(255,245,214,.7),0 5px 10px rgba(88,45,12,.3);
}
.topbar::after {
  display:block!important;
  content:"";
  z-index:0;
  position:absolute;
  top:3px;right:17px;
  width:112px;height:118px;
  border:0;border-radius:0;
  opacity:1;
  background: url('assets/decor/ankh-stone-plaque.png') center center / contain no-repeat;
  box-shadow:none;
  pointer-events:none;
}
.topbar .brand{position:relative;z-index:1}
.topbar-right{margin-right:105px;position:relative;z-index:1}
.brand-text {
  font-size:clamp(35px,4.1vw,51px);
  color:#713b12;
  text-shadow:0 2px #ffdfa8, 2px 4px rgba(74,36,7,.36);
}
.brand-text .gold {color:#b76611}
.brand-logo {width:69px;height:69px}
.tabs {
  background-color:#e6bf82;
  background-image:linear-gradient(180deg,rgba(255,239,204,.34),rgba(189,122,50,.20)),var(--temple-photo-panel);
  background-size:cover,370px;
  border-bottom:5px ridge #c38a47;
  border-top:1px solid rgba(255,247,206,.8);
  box-shadow:inset 0 3px 0 rgba(255,249,232,.60),0 5px 10px rgba(86,41,9,.19);
  padding:5px 10px;
}
.tab.active,.tab:hover {
  background:linear-gradient(175deg,rgba(255,251,228,.50),rgba(233,191,129,.57)),var(--temple-photo-panel);
  background-size:cover,320px 320px;
  border:1px solid #bd7931;
  box-shadow:inset 0 2px #fff8d8,0 3px 0 #9f632c,0 5px 8px rgba(69,32,10,.16);
}
.content {
  min-height:calc(100vh - 270px);
  padding:15px clamp(21px,6.4vw,72px) 35px;
  position:relative;
  isolation:isolate;
  background-color:#d7a266;
  background-image:
    linear-gradient(90deg,rgba(116,69,25,.18),transparent 9%,transparent 91%,rgba(116,69,25,.18)),
    linear-gradient(180deg,rgba(255,234,184,.16),rgba(180,111,49,.05)),
    var(--temple-photo-wall);
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:cover,cover,640px 640px;
  border-bottom:9px ridge #9d632c;
}
.content::before,.content::after {
  content:"";display:block;
  position:absolute;
  top:0;bottom:0;
  width:78px;
  background-repeat:no-repeat,repeat-y;
  background-position:center top;
  background-size:78px 718px;
  pointer-events:none;
  opacity:1;
  z-index:0;
  filter:drop-shadow(3px 0 3px rgba(62,26,5,.25));
}
.content::before{left:0;background-image:url('assets/decor/temple-column-left.png')}
.content::after{right:0;background-image:url('assets/decor/temple-column-right.png');filter:drop-shadow(-3px 0 3px rgba(62,26,5,.25))}
.content > * {position:relative;z-index:1}
.section-title,.hero h1,.brand-text, .glossary-group-title {text-shadow:0 2px 0 rgba(255,222,161,.75)}
.eyebrow {color:#9c501c}
.section-desc {color:var(--color-heading);font-size:15px}
/* Actual limestone grain visible in card surfaces. Earlier 80%-opaque
   white overlay concealed all texture, now it stays below 32%. */
.card,.soft-card,.menu-card,.catalog-item,.memage-card,
.digit-tile,.learn-panel,.detail-image-trigger,.glossary-entry,
.public-study-guide.card,.technique-card,.training-bound,
.quiz-panel,.quiz-target,.temple-lesson-prompt {
  background-color:#f4d5a6;
  background-image:linear-gradient(145deg,rgba(255,253,236,.30),rgba(242,209,159,.09) 73%),var(--temple-photo-panel);
  background-size:cover,480px 480px;
  border:2px solid #be7e3e;
  outline:1px solid rgba(255,233,189,.6);
  box-shadow:inset 0 3px 1px rgba(255,249,217,.87),
    inset 0 -4px 2px rgba(130,68,20,.20),
    0 4px 0 #ac7133,0 8px 13px rgba(77,36,7,.20);
}
.public-study-guide.card {padding:0;overflow:hidden}
.catalog-item {outline:none}
.memages-catalog-screen .catalog-item,
.memages-catalog-screen .catalog-image {background-color:#fffaed}
.memages-catalog-screen .catalog-item {
  background-image:linear-gradient(140deg,rgba(255,249,220,.32),rgba(237,200,144,.1)),var(--temple-photo-panel);
  border-color:#c28c53;
  box-shadow:inset 0 2px 0 #fff3cc,0 3px 0 #a87740,0 5px 8px rgba(77,33,8,.18);
}
.memages-catalog-screen .catalog-image {
  background-image:linear-gradient(180deg,#fffdf6,#faefd7);
  border-color:#dbb57a;
}
.digit-tile {border-width:2px 2px 3px}
.digit-tile .hint {color:var(--color-heading)}
.learn-panel {border-left:6px solid var(--color-orange)}
/* Relief stone buttons are photographic stone-rim surfaces taken from approved
   first mockup, with decorative labels removed and live text rendered on top. */
.home-temple {max-width:1000px}
.home-temple-intro {border-bottom:1px solid rgba(123,66,25,.38);margin-bottom:8px}
.home-temple-intro .section-title {font-size:clamp(27px,3.1vw,35px)}
.temple-nav-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px 13px;
  max-width:930px;
  margin:10px auto 19px;
}
.temple-nav-card {
  min-height:160px;
  border:0;
  border-radius:0;
  padding:20px 18px 18px;
  gap:8px;
  background:transparent var(--temple-photo-button) center / 100% 100% no-repeat;
  box-shadow:none;
  filter:drop-shadow(0 5px 2px rgba(89,42,14,.20));
  transition:transform .15s,filter .15s;
}
.temple-nav-card::after{content:none;display:none}
.temple-nav-card img {width:59px;height:59px;filter:drop-shadow(1px 2px rgba(100,47,13,.24))}
.temple-nav-card span {font-size:16px;color:#522a14;line-height:1.16}
.temple-nav-card:hover {background-color:transparent;border:0;box-shadow:none;filter:drop-shadow(0 8px 4px rgba(89,42,14,.24)) brightness(1.03)}
.temple-nav-card:focus-visible {outline:3px solid #a35216;outline-offset:-10px}
.temple-nav-card:active{background-color:transparent;box-shadow:none;filter:brightness(.96);transform:translateY(2px)}
/* Sculpted warm gold CTA with a real sand-grain finish. */
.btn,.btn.gold-btn,.btn.ghost,.catalog-page,.switcher button.on {
  border-radius:12px;
  border-width:2px;
}
.btn.gold-btn,.learning-back-row .learning-back-btn {
  background-image:linear-gradient(180deg,rgba(255,237,162,.30),rgba(218,147,36,.20)),
    var(--temple-photo-panel);
  background-size:cover,180px;
  background-color:#e4a43e;
  border:2px solid #aa681c;
  color:#51290f;
  box-shadow:inset 0 2px 0 #ffeab5,inset 0 -3px rgba(136,77,13,.26),0 4px 0 #95561b,0 6px 10px rgba(74,34,7,.19);
}
.btn.ghost {
  background-image:linear-gradient(180deg,rgba(255,251,228,.47),rgba(238,198,132,.20)),var(--temple-photo-panel);
  background-size:cover,280px;
  background-color:#f6d7a5;
  border-color:#ba8348;
  box-shadow:inset 0 2px 0 #fff4d4,0 3px 0 #ac783f,0 4px 8px rgba(92,49,15,.19);
}
.temple-lesson-prompt {border-width:2px;border-color:#b57a42;padding:9px 12px}
.public-study-guide.card summary {font-family:var(--font-text-anubis);background-color:rgba(252,231,192,.37)}
.footer {
  background-image:linear-gradient(180deg,rgba(255,243,213,.48),rgba(222,164,90,.46)),url('assets/decor/temple-foundation.webp');
  background-size:cover,cover;
  background-position:center,bottom;
  color:var(--color-heading);
  border-top:4px ridge #b67d38;
}
@media(max-width:1120px) {
  .content {padding-inline:clamp(15px,5vw,58px)}
  .content::before,.content::after {width:55px;background-size:55px 690px;opacity:.87}
}
@media(max-width:800px) {
  .topbar {min-height:99px;padding:9px 15px}
  .brand-logo{width:49px;height:49px}
  .brand-text{font-size:clamp(28px,4vw,37px)}
  .topbar::after {width:80px;height:85px;right:8px}
  .topbar-right {margin-right:76px}
  .temple-nav-card{min-height:137px;padding:14px 10px 13px}
  .temple-nav-card img{width:48px;height:48px}
  .temple-nav-card span{font-size:13px}
}
@media(max-width:600px) {
  .app-shell {border-inline:0}
  .content {padding:11px 12px 25px;background-size:cover,cover,400px 400px}
  .content::before,.content::after{display:none!important}
  .topbar {min-height:79px;border-bottom-width:5px;padding:8px 12px}
  .brand-logo{width:38px;height:38px}
  .brand-text{font-size:clamp(23px,6.1vw,28px)}
  .topbar-right{margin-right:0}
  .topbar::after{display:none!important}
  .tabs{border-bottom-width:4px}
  .temple-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:450px}
  .temple-nav-card{min-height:135px;padding:17px 10px 13px;gap:5px}
  .temple-nav-card img{width:48px;height:48px}
  .temple-nav-card span{font-size:13px}
  .section-desc{font-size:14px}
  .card,.soft-card,.menu-card,.digit-tile,.learn-panel,.glossary-entry {border-width:1px}
}
@media(max-width:360px){.temple-nav-card{min-height:125px}.temple-nav-card img{width:43px;height:43px}}
@media(prefers-reduced-motion:reduce){.temple-nav-card{transition:none}}
/* Keep the v32 five-column desktop catalog and generous art size, while the
   ornamental columns remain beyond (not on top of) the interactive area. */
@media(min-width:801px){
  .content{max-width:1120px;padding-inline:clamp(64px,7.5vw,88px)}
}
@media(min-width:601px) and (max-width:800px){
  .content{max-width:100%;padding-inline:clamp(48px,7.5vw,62px)}
}
/* The original mockup uses honey-gold for its primary call to action. */
.btn.gold-btn,.learning-back-row .learning-back-btn {
  background-color:#e2a036;
  background-image:linear-gradient(180deg,rgba(255,214,100,.87),rgba(225,137,19,.89)),var(--temple-photo-panel);
  color:#542707;
}
@media(max-width:600px){
  .temple-nav-card{min-height:123px;padding:13px 9px 10px}
  .temple-nav-grid{gap:7px}
}