.glade-stage {
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:#1b141f url("assets/templo-velado.webp") center/cover no-repeat;
}
.glade-world {
  position:absolute; left:0; top:0; transition:transform .45s ease-out;
}
.glade-landscape {display:block; width:100%; height:100%; user-select:none}
.temple-effects,.temple-atmosphere {position:absolute; inset:0; overflow:hidden; pointer-events:none}
.temple-lamplight {
  position:absolute; aspect-ratio:1.4; transform:translate(-50%,-50%); opacity:.30;
  background:radial-gradient(ellipse,rgba(255,217,132,.78) 0%,rgba(255,172,76,.29) 16%,rgba(244,119,56,.16) 38%,transparent 72%);
  mix-blend-mode:screen;
}
.temple-mote {
  position:absolute; width:var(--mote-size); height:var(--mote-size); opacity:0;
  border-radius:50%; background:#ffe1aa; box-shadow:0 0 3px #ffe3b285;
}
.temple-incense {
  position:absolute; left:6%; top:49%; width:88%; height:22%; opacity:.23;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse 7% 27% at 12% 55%,#c9bfea55,transparent),
    radial-gradient(ellipse 5% 25% at 88% 64%,#b8b5dc55,transparent),
    radial-gradient(ellipse 19% 16% at 49% 53%,#e0b99921,transparent);
}
.temple-arch-opening {position:absolute; overflow:hidden; isolation:isolate}
.temple-presence {position:absolute; left:0; top:0; height:100%; width:auto; opacity:0; pointer-events:none}
#portal-cover{background:#0c1c16;color:#f9eee0}
#portal-cover:before{z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,22,17,.92) 0%,rgba(9,26,19,.74) 26%,rgba(11,26,17,.2) 53%,transparent 73%),linear-gradient(0deg,#081710a8,transparent 27%)}
.cover-bar,.cover-content,.cover-foot{position:relative;z-index:2}
.cover-bar{padding-inline:clamp(25px,6vw,120px)}
.cover-brand{letter-spacing:-1px}.cover-brand svg{color:#f4c87e}.cover-nav-login,.glade-explore,.glade-exit,.glade-listen{border:1px solid #edcf9f70;background:#10271ec9;color:#fff3dc;box-shadow:0 2px 12px #0b1d171c;cursor:pointer}
.cover-content{padding-inline:clamp(25px,8vw,160px)}
.cover-intro h1{color:#fff6df}.cover-intro h1 em,.glade-home h1 em{color:#f4c882}.cover-intro p{color:#f4eddb;max-width:35ch}
.cover-gold,.glade-home .gold-button,.glade-destination{background:linear-gradient(110deg,#ffe2a3,#efbc78);border:1px solid #efc98b;color:#2c2114;font-weight:700;box-shadow:0 3px 16px #23190a38}
.cover-gold:hover,.glade-home .gold-button:hover,.glade-destination:hover{background:#ffe3a8}
.cover-foot{justify-content:space-between;border-color:#d9c79242;background:#0c2119bd;color:#efe2bf}.cover-foot>span:first-child{color:#eed5a3}
.cover-form input{background:#10241def;color:#ffefd6}.cover-back,.cover-link{color:#f7d7a2}
.glade-explore,.glade-exit,.glade-listen{display:inline-flex;justify-content:center;align-items:center;gap:9px;border-radius:999px;padding:10px 15px;min-height:42px;font:600 13px var(--sans);white-space:nowrap}
.glade-explore:hover,.glade-listen:hover,.glade-exit:hover{background:#244435;border-color:#edd398}.glade-explore .icon,.glade-listen .icon{width:18px;height:18px;color:#f4ca84}
body:has(.shell:not([hidden]) #sanctuary:not([hidden])){background:#0b1712;color:#f5ecdc}
body:has(#sanctuary:not([hidden])) .sidebar{background:linear-gradient(165deg,#162b21,#0c1a14 82%);border-right-color:#b8c39b33}
body:has(#sanctuary:not([hidden])) .topbar{background:#102119ed;border-color:#adc29b36}
body:has(#sanctuary:not([hidden])) .nav-item.active{background:#384531;color:#ffe0a7;border-color:#dcbc804f}
body:has(#sanctuary:not([hidden])) .nav-item{color:#e1e2cf}
body:has(#sanctuary:not([hidden])) .workspace{background:radial-gradient(ellipse at 68% 0%,#293b28 0,transparent 52%),#0e1d16}
.hero.glade-home{display:flex;align-items:center;min-height:330px;height:clamp(330px,30vw,485px);background:#182b20;border:1px solid #8d9d705c;border-radius:16px;box-shadow:0 13px 40px #08171038}
.glade-home:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#071b14eb 0%,#0b2017b8 26%,#0c201749 49%,transparent 70%),linear-gradient(0deg,#0c1f143b,transparent 34%)}
.glade-home .hero-copy{position:relative;z-index:2;padding:clamp(22px,3.4vw,58px);max-width:min(61%,670px)}
.glade-home h1{font-size:clamp(52px,5.5vw,96px);line-height:.91;letter-spacing:-.05em;color:#fff5dd}
.glade-home h1 em{display:block;font-weight:400}.glade-home .hero-copy p{font-size:clamp(14px,1.15vw,18px);line-height:1.48;color:#f0edda;max-width:30ch;margin:15px 0 0}
.glade-home-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.glade-home .gold-button{margin:0;padding:11px 16px;min-height:44px;font-size:13px}.glade-home .gold-button span{margin-left:6px}
.glade-home .glade-explore{font-size:12px;min-height:44px}
.oracles{margin-top:clamp(24px,3.2vw,46px)}.oracles .section-heading{align-items:center;justify-content:flex-start;gap:18px;margin-bottom:17px}
.oracles .section-heading h2{color:#f9f0dd;letter-spacing:-.035em}.glade-rule{flex:1;height:1px;background:linear-gradient(90deg,#ceb98075,transparent)}
#cards .oracle-card{height:clamp(210px,19vw,305px);justify-content:flex-end;border:1px solid #9b986e72;background:#15261d;border-radius:13px}
#cards .oracle-card:is(:hover,:focus-visible){border-color:#e7c287}
#cards .card-image{position:absolute;inset:0;aspect-ratio:auto;height:100%;background:#203022}
#cards .card-image:after{background:linear-gradient(180deg,#1520160a 8%,transparent 29%,#101a1378 54%,#0c170ff2 100%)}
#cards .card-body{position:relative;flex:none;min-height:0;padding:18px clamp(13px,1.4vw,24px)}
#cards .card-heading{font-weight:500;font-size:clamp(27px,2.4vw,39px);color:#fff2d8}
#cards .card-desc{flex:none;min-height:0;font-size:13px;line-height:1.4;color:#e8e8d7;margin-top:6px}
.glade-card-arrow{display:grid;place-items:center;position:absolute;right:12px;top:12px;margin:0;width:34px;height:34px;border:1px solid #f4daaa80;border-radius:50%;background:#13211ad9;color:#fde3ac}.glade-card-arrow .icon{width:17px;height:17px}
.glade-explorer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;inset:0;border:0;border-radius:0;background:#102219;color:#fff3d9;overflow:hidden}
.glade-explorer::backdrop{background:#08150f}
.glade-explorer .glade-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#071810ed 0,transparent 25%,transparent 85%,#06180f6b)}
.glade-explorer .glade-world{transition:transform .16s ease-out}
.glade-explorer-bar,.glade-explorer-foot{position:absolute;left:0;right:0;z-index:2;display:flex;align-items:center;gap:14px;padding:clamp(18px,4vw,60px)}
.glade-explorer-bar{top:0;justify-content:space-between;pointer-events:none}.glade-explorer-bar>*{pointer-events:auto}
.glade-explorer-foot{bottom:0;align-items:end;justify-content:space-between;pointer-events:none}.glade-explorer-foot>*{pointer-events:auto}
.glade-explorer-copy{margin-right:auto;color:#fff4de;text-shadow:0 1px 9px #102019}.glade-explorer-copy h2{font:500 clamp(46px,5vw,85px)/.94 var(--serif);letter-spacing:-.045em;margin:0}.glade-explorer-copy p{margin:8px 0 0;color:#efe8d6}
.glade-camera{position:absolute;inset:0;z-index:1;cursor:grab;touch-action:none}.glade-camera.is-dragging{cursor:grabbing}
.glade-camera-controls{display:flex;gap:6px}.glade-camera-controls button{background:#10241be6;color:#fff2cd;width:42px;height:42px;cursor:pointer;border:1px solid #e7d8b079;border-radius:50%;font-size:21px}
.glade-destination{border-radius:8px;padding:11px 16px;min-height:43px;cursor:pointer;font:700 13px var(--sans)}
@media(max-width:960px){.glade-home .hero-copy{max-width:64%}#cards .oracle-card{height:clamp(205px,29vw,260px)}}
@media(max-width:660px){
 #portal-cover{min-height:100svh}#portal-cover>.glade-stage{bottom:auto;height:52svh;min-height:230px}
 #portal-cover:before{background:linear-gradient(180deg,#0820195c 0,transparent 17svh,transparent 34svh,#0c1c16 52svh)}
 .cover-bar,.cover-foot{padding:16px 22px}.cover-content{padding:clamp(220px,35svh,370px) 24px 22px;align-items:end}
 .cover-intro h1{font-size:clamp(70px,16vw,94px);margin-bottom:17px}.cover-intro p{font-size:16px;max-width:35ch;margin-bottom:20px}
 #portal-cover:has(.cover-auth:not([hidden])) .cover-content{padding-top:clamp(145px,24svh,280px)}
 #portal-cover:has(.cover-auth:not([hidden])):before{background:linear-gradient(180deg,#09201855,transparent 14svh,#0c1c16 34svh)}
 .cover-foot{flex-wrap:wrap;gap:13px;font-size:11px}.cover-foot>span:first-child{width:auto}
 .cover-foot .glade-explore{font-size:12px}.hero.glade-home{align-items:flex-end;height:clamp(395px,110vw,480px)}
 .glade-home .glade-stage{bottom:auto;height:65%}.glade-home:after{background:linear-gradient(0deg,#12261c 0%,#12261c 35%,#12261cdb 42%,transparent 62%)}
 .glade-home .hero-copy{padding:18px 20px 22px;max-width:100%}.glade-home h1{font-size:clamp(44px,9.6vw,63px)}.glade-home h1 em{display:inline}
 .glade-home .hero-copy p{margin-top:9px;font-size:15px;max-width:34ch}.glade-home-actions{margin-top:14px;gap:8px}
 .glade-home-actions .gold-button,.glade-home-actions .glade-explore{padding:9px 12px;min-height:42px;font-size:12px}
 #cards .card-desc{font-size:12px}#cards .card-heading{font-size:clamp(24px,5.6vw,32px)}#cards .card-body{padding:13px}
 #cards .oracle-card{height:clamp(183px,39vw,250px)}.glade-explorer-foot{flex-wrap:wrap;gap:12px;padding:20px;align-items:center}.glade-explorer-copy{flex-basis:100%;max-width:85%}
 .glade-explorer-copy p{font-size:13px}.glade-camera-controls{margin-right:auto}.glade-explorer-bar{padding:17px}
}
@media(max-width:365px){#cards{grid-template-columns:1fr}#cards .oracle-card{height:192px}.glade-home .hero-copy{padding:16px}.glade-home h1{font-size:41px}.glade-home-actions{gap:6px}.glade-home-actions .glade-explore,.glade-home-actions .gold-button{font-size:11px;padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.glade-world,.glade-explorer .glade-world{transition:none}}

/* Keep each family of consultations together, including when the sidebar is visible. */
#cards {container-type:inline-size}
#cards .catalogue-group + .catalogue-group {margin-block-start:clamp(30px,4vw,60px)}
#cards .cards-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
#cards .cards-grid > :last-child {grid-column:1 / -1}
#cards a.oracle-card {text-decoration:none}
#cards .oracle-card:focus-visible {outline:2px solid #f9d999;outline-offset:3px}
@container (min-width:720px) {
  #cards .cards-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  #cards .cards-grid > :last-child {grid-column:auto}
  #astro-cards .oracle-card[href="#horoscopo"] {grid-column:span 2}
  #astro-cards .oracle-card[href="#horoscopo"] .card-desc {max-width:38ch}
}
@container (max-width:340px) {
  #cards .cards-grid {grid-template-columns:1fr}
}
@container (min-width:341px) and (max-width:460px) {
  #astro-cards > :nth-child(-n+2) {grid-column:1/-1}
  #cards #astro-cards > :nth-child(-n+2) {height:clamp(165px,47cqw,205px)}
  #astro-cards .oracle-card[href="#horoscopo"] .card-image img {object-position:center 35%}
}

/* In the explorer a quiet bronze frame leaves the painted stone, moon and fire visible. */
.glade-explorer {
  color-scheme:dark; color:#fbefd9; background:#17121c;
  font-family:var(--sans);
}
.glade-explorer::backdrop {background:#100c15}
.glade-explorer .glade-stage:after {
  background:linear-gradient(0deg,rgba(13,10,16,.90),rgba(16,12,19,.44) 10%,transparent 27%,transparent 80%,rgba(17,12,19,.53)),
    linear-gradient(90deg,#1b121b2b,transparent 15%,transparent 85%,#1a111b2b);
}
.glade-explorer .glade-utilities {display:flex; align-items:center; gap:8px}
.glade-explorer :is(.glade-exit,.glade-listen,.glade-motion,.glade-camera-controls button) {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  color:#f8ebd6; border:1px solid #cfa77885; border-radius:24px;
  background:linear-gradient(170deg,rgba(41,30,42,.91),rgba(24,18,29,.92));
  box-shadow:0 4px 16px #100b1240; cursor:pointer;
}
.glade-explorer .glade-motion {padding:9px 15px; font:600 13px var(--sans)}
.glade-explorer :is(.glade-exit,.glade-listen,.glade-motion,.glade-camera-controls button):hover {
  background:#473148; border-color:#eac998;
}
.glade-explorer :focus-visible {outline:2px solid #ffe2a9; outline-offset:3px}
.glade-explorer .glade-camera:focus-visible {outline-offset:-5px}
.glade-explorer-copy h2 {color:#ffeccf; text-shadow:0 2px 20px #19121f}
.glade-explorer-copy p {color:#f7e5cf; text-shadow:0 1px 8px #140d16}
.glade-explorer .glade-destination {min-height:44px}
.glade-explorer .glade-camera-controls button {width:44px}
@media(max-width:660px) {
  .glade-explorer-bar {padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 14px max(12px,env(safe-area-inset-left));gap:6px}
  .glade-explorer .glade-utilities {flex-wrap:wrap;justify-content:flex-end;gap:5px}
  .glade-explorer :is(.glade-exit,.glade-listen,.glade-motion) {padding:8px 10px;gap:4px;font-size:12px}
  .glade-explorer-foot {padding:16px 16px max(20px,env(safe-area-inset-bottom))}
  .glade-explorer .glade-stage:after {background:linear-gradient(0deg,#100c14f7,rgba(17,12,21,.59) 15%,transparent 35%,transparent 81%,#160e1a75)}
}
@media (prefers-reduced-motion: reduce) {
  .glade-world,.glade-explorer .glade-world {transition:none}
  .temple-mote,.temple-presence {visibility:hidden}
}
