/* Sanctuary is a live Oracle surface. Only the orchard and engraved emblems are art. */
.app { padding-bottom: max(106px, 7.5rem, calc(94px + env(safe-area-inset-bottom, 0px))); }

.app-dock { position: fixed; z-index: 40; left: 50%; bottom: 0; width: min(100%, 660px); padding: 7px max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); transform: translateX(-50%); color: #dfcebb; }
.app-dock-rail {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  min-height: 70px;
  padding: 4px;
  border: 1px solid #b89b7b85;
  border-radius: 18px;
  background: linear-gradient(180deg,#20191f,#0c0b11);
  box-shadow: 0 -12px 31px #0302059c, 0 8px 24px #0009, inset 0 1px #f1d9b73b, inset 0 0 0 1px #08070b8c;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-dock-rail {
    background: linear-gradient(180deg,#3b303783,#110d16ad 72%,#0b0912bd);
    -webkit-backdrop-filter: blur(18px) saturate(1.2) brightness(.82);
    backdrop-filter: blur(18px) saturate(1.2) brightness(.82);
  }
}
.app-dock-rail::before,
.app-dock-rail::after { content: ''; position: absolute; pointer-events: none; border-radius: inherit; }
.app-dock-rail::before {
  inset: 1px;
  background: url('../assets/oracle/tab-frost-v1.png') center / cover no-repeat;
  opacity: .075;
}
.app-dock-rail::after {
  inset: 1px 10px auto;
  height: 1px;
  background: linear-gradient(90deg,transparent,#e9d9c05c 18%,#f4e6d8a6 50%,#e9d9c05c 82%,transparent);
  opacity: .72;
}
.app-dock-link { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 60px; border: 1px solid transparent; border-radius: 13px; color: #d0bfae; text-decoration: none; font-size: clamp(.72rem,2.7vw,.9rem); letter-spacing: .085em; line-height: 1.1; text-transform: uppercase; transition: color .2s, background .2s, transform .15s; }
.app-dock-link img { width: 27px; height: 27px; object-fit: contain; opacity: .86; filter: sepia(.15) brightness(1.35); }
.app-dock-link span { max-width:100%; overflow-wrap:anywhere; text-align:center; }
.app-dock-link[href='#personas'] img { width: 22px; }
.app-dock-link[href='#sanctuary'] img { width: 27px; }
.app-dock-link[aria-current='page'] { color: #f6e7d7; border-color: color-mix(in srgb,var(--character-glow) 28%,#bda385); background: radial-gradient(ellipse at 50% 115%,color-mix(in srgb,var(--character-glow) 21%,transparent),transparent 76%),linear-gradient(180deg,#5b4a552e,#1a141d75); box-shadow: inset 0 1px #f7e9de2b, inset 0 0 16px color-mix(in srgb,var(--character-glow) 12%,transparent),0 0 12px color-mix(in srgb,var(--character-glow) 9%,transparent); }
.app-dock-link[aria-current='page']::before { content:''; position:absolute; top:1px; left:13%; right:13%; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--character-glow) 50%,#f6d9b7),transparent); opacity:.58; animation:dock-edge-glint .22s ease-out both; }
.app-dock-link[aria-current='page']::after { content:''; position:absolute; inset:0; border: 11px solid transparent; border-image: url('../assets/oracle/tab-sub-plate-v1.png') 180 / 11px stretch; pointer-events:none; opacity:.29; }
.app-dock-link[aria-current='page'] img { opacity: 1; filter: sepia(.2) brightness(1.65) drop-shadow(0 0 5px var(--character-glow)); }
.app-dock-link:hover { color:#f5e6d3; background-color:#a6879030; }
.app-dock-link:active { transform: translateY(1px); }
.app-dock-link:focus-visible { z-index:2; outline:2px solid var(--character-focus); outline-offset:2px; }
@keyframes dock-edge-glint { from { opacity:.1; transform:scaleX(.35); } 55% { opacity:1; } to { opacity:.58; transform:scaleX(1); } }

.sanctuary-app { --sanctuary-red:#ce5559; --sanctuary-metal:#b39469; }
.sanctuary-shell { container-type:inline-size; border:1px solid #78644e9c; background:#09080b url('../assets/textures/velvet.webp') center / 500px; }
.sanctuary-shell::after { opacity:.39; }
.sanctuary-composition { position:relative; isolation:isolate; }
.sanctuary-hero { position:relative; min-height:clamp(460px,94cqw,605px); padding:0 6.3% 64px; }
.sanctuary-scene { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#090707; }
.sanctuary-scene img,.sanctuary-scene .ambient-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:72% 50%; }
.sanctuary-scene .ambient-video { opacity:0; transition:opacity .4s ease-out; }
.sanctuary-scene.is-playing .ambient-video { opacity:1; }
.sanctuary-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0706097a,transparent 64%); }
.sanctuary-header { position:relative; z-index:4; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:8px; padding-top:20px; color:#d6c6ad; }
.sanctuary-close { display:flex; align-items:center; gap:5px; width:max-content; min-height:44px; padding:0; border:0; background:none; color:inherit; font-size:1.05rem; letter-spacing:.17em; }
.sanctuary-close:hover { color:#fff0d8; }
.sanctuary-heading { display:grid; justify-items:center; gap:1px; white-space:nowrap; text-align:center; }
.sanctuary-heading span:first-child { font-size:clamp(1.5rem,5cqw,2.15rem); letter-spacing:.38em; line-height:1.1; margin-right:-.38em; }
.sanctuary-heading span:last-child { color:#dd6464; font-size:clamp(.72rem,2.5cqw,.92rem); letter-spacing:.36em; margin-right:-.36em; }
.sanctuary-header-mark { justify-self:end; color:#bb8b5b; font-size:1.25rem; padding:8px 0; }
.sanctuary-identity { position:relative; z-index:4; margin-top:clamp(62px,19cqw,120px); text-shadow:0 2px 12px #000; }
.sanctuary-profile-copy { width:52%; min-width:0; }
.sanctuary-overline { margin:0 0 8px; color:#dfccb0; font-size:clamp(.7rem,2.4cqw,.9rem); line-height:1.35; letter-spacing:.15em; }
.sanctuary-profile-copy h1 { margin:0; font-weight:400; color:#f2e7d4; font-size:clamp(4rem,13.5cqw,5.7rem); line-height:.88; letter-spacing:.025em; }
.sanctuary-preview { box-sizing:border-box; width:max-content; max-width:100%; margin:8px 0 0; padding:2px 7px; border:1px solid #ac8c6d72; color:#d7c4a9; background:#0b090a99; font-size:.65rem; letter-spacing:.12em; }
.sanctuary-mortal { margin:19px 0 8px; color:var(--sanctuary-red); font-size:clamp(1.75rem,5.3cqw,2.45rem); line-height:1; letter-spacing:.13em; white-space:nowrap; }
.sanctuary-mortal span { font-size:.65em; }
.sanctuary-rank-line { display:flex; align-items:baseline; gap:10px; margin:0; color:#deceb6; font-size:.8rem; letter-spacing:.22em; }
.sanctuary-rank-line span:last-child { font-size:1.15rem; }
.sanctuary-profile-copy blockquote { margin:12px 0 20px; color:#d7c8b6; font-size:clamp(1.1rem,3.6cqw,1.5rem); font-style:italic; line-height:1.2; }
.sanctuary-ascend { display:inline-flex; align-items:center; flex-wrap:wrap; box-sizing:border-box; max-width:100%; gap:8px; min-height:44px; padding:7px 12px; border:1px solid #a5484a8c; border-radius:5px; background:linear-gradient(100deg,#310f16bb,#120b0dcc); color:#ead7bc; font-size:1.05rem; letter-spacing:.08em; }
.sanctuary-ascend > span { color:#c84c48; }
.sanctuary-ascend small { margin-left:3px; color:#dba890; font-size:.58rem; letter-spacing:.05em; }

/* Both root passes share the same dimensions and anchor. The metal rail lies between them. */
.sanctuary-essence-anchor { position:relative; isolation:isolate; margin:0 3.3%; --root-width:107.1%; }
.sanctuary-root { position:absolute; width:var(--root-width); height:auto; right:-3.55%; top:0; transform:translateY(calc(-1 * var(--root-anchor))); pointer-events:none; opacity:0; }
.sanctuary-essence-anchor.roots-ready .sanctuary-root { opacity:1; }
.sanctuary-root-rear { z-index:0; }
.sanctuary-root-shadow { z-index:3; }
.sanctuary-root-front { z-index:4; }
.sanctuary-essence { --oracle-opacity:.8; position:relative; z-index:1; padding:22px 4.2% 14px; border-radius:14px; background:#0b090bf5 url('../assets/textures/velvet.webp') center / 500px; background-blend-mode:multiply; }
.sanctuary-essence h2 { position:relative; z-index:6; margin:0 0 7px; color:#e5d2bd; font-size:1.25rem; font-weight:400; letter-spacing:.34em; }
.essence-resource { position:relative; z-index:6; display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:15px; min-height:88px; padding-block:8px; border-bottom:1px solid #9b745455; text-decoration:none; }
.essence-resource:last-of-type { border-bottom:0; }
.essence-resource-link:focus-visible { outline:2px solid var(--character-focus); outline-offset:3px; border-radius:5px; }
.essence-resource-link:hover .resource-copy strong { color:#fff0d8; }
.resource-medallion { display:grid; place-items:center; width:58px; height:58px; border:1px solid #8e735d79; border-radius:50%; box-shadow:inset 0 0 0 5px #0b080a,inset 0 0 0 6px #99714b3c; }
.blood-emblem { display:block; width:auto; height:42px; object-fit:contain; pointer-events:none; }
.resource-heat img { width:30px; height:34px; object-fit:contain; filter:drop-shadow(0 0 5px #d84c2a); }
.resource-copy { display:grid; min-width:0; gap:1px; }
.resource-copy strong { color:#efe2d0; font-size:clamp(1.32rem,4cqw,1.75rem); font-weight:400; letter-spacing:.09em; }
.resource-copy small { max-width:17rem; color:#cbbbA7; font-size:clamp(.9rem,2.6cqw,1.08rem); line-height:1.15; }
.resource-value { justify-self:end; text-align:right; white-space:nowrap; }
.resource-soon { color:#d2b798; font-size:clamp(.66rem,2cqw,.84rem); letter-spacing:.08em; }
.resource-heat-balance { color:#e96865; font-size:clamp(1.35rem,4.5cqw,2rem); letter-spacing:.09em; font-variant-numeric:tabular-nums; }
.sanctuary-body { position:relative; display:grid; gap:18px; padding:28px 3.3% 27px; }
.sanctuary-body h2,.sanctuary-body h3 { font-weight:400; }

.sanctuary-pact { --oracle-opacity:.36; display:grid; grid-template-columns:clamp(96px,24%,150px) minmax(0,1fr) 36px; align-items:center; gap:clamp(9px,2.8vw,22px); min-height:145px; overflow:hidden; padding:14px clamp(13px,3vw,22px) 14px 4px; border-radius:12px; background:linear-gradient(90deg,#160e10,#0b090bf5 70%); }
.sanctuary-pact > img { width:100%; height:122px; object-fit:cover; object-position:50% 52%; mask-image:linear-gradient(90deg,#000 64%,transparent),linear-gradient(0deg,transparent,#000 14% 86%,transparent); mask-composite:intersect; }
.sanctuary-pact h2 { margin:0; color:#d9585b; font-size:clamp(1.25rem,4.5vw,1.9rem); letter-spacing:.12em; line-height:1; }
.sanctuary-pact p { margin:4px 0; color:#c1ac98; font-size:clamp(.94rem,3vw,1.18rem); }
.sanctuary-pact div > span { color:#bd8e78; font-size:.71rem; letter-spacing:.15em; }
.pact-orbit { display:grid; place-items:center; width:35px; height:35px; border:1px solid #b74041b8; border-radius:50%; color:#d85050; font-size:1.55rem; line-height:1; box-shadow:0 0 13px #9e1c2740; }

.sanctuary-settings { display:grid; gap:6px; }
.sanctuary-settings > h2 { margin:3px 0 4px; color:#bda78b; font-size:.86rem; letter-spacing:.34em; text-align:center; }
.sanctuary-setting { --oracle-opacity:.27; display:grid; grid-template-columns:65px minmax(0,1fr) auto; align-items:center; gap:13px; min-height:91px; padding:9px 18px 9px 9px; border-radius:9px; background:linear-gradient(90deg,#111013e8,#0a090af5); }
.sanctuary-setting > img { display:block; width:62px; height:62px; object-fit:contain; padding:4px; background:url('../assets/sanctuary/rank-ring-v1.webp') center / contain no-repeat; filter:sepia(.18) brightness(.95); }
.sanctuary-setting h3 { margin:0; color:#e5d5bf; font-size:clamp(1.1rem,3.5vw,1.5rem); letter-spacing:.045em; line-height:1; }
.sanctuary-setting p { margin:3px 0 0; color:#b9a895; font-size:clamp(.87rem,2.65vw,1.02rem); line-height:1.08; }
.sanctuary-setting > span { color:#ac8873; font-size:.66rem; letter-spacing:.07em; white-space:nowrap; }
.sanctuary-setting-control { width:100%; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.sanctuary-setting-control > span:not(:last-child) { white-space:normal; letter-spacing:normal; }
.sanctuary-setting-label { display:block; color:#e5d5bf; font-size:clamp(1.1rem,3.5vw,1.5rem); letter-spacing:.045em; line-height:1; }
.sanctuary-setting-description { display:block; margin-top:3px; color:#b9a895; font-size:clamp(.87rem,2.65vw,1.02rem); line-height:1.2; }
.sanctuary-setting-control:focus-visible { outline:2px solid var(--character-focus,#edb990); outline-offset:3px; }

@container (max-width:430px) {
 .sanctuary-hero { padding-inline:6%; padding-bottom:58px; }
 .sanctuary-header { padding-top:17px; }
 .sanctuary-close { font-size:.83rem; letter-spacing:.09em; }
 .sanctuary-header-mark { font-size:1rem; }
 .sanctuary-profile-copy { width:61%; }
 .sanctuary-overline { max-width:15rem; }
 .sanctuary-mortal { font-size:clamp(1.65rem,6cqw,1.9rem); letter-spacing:.12em; }
 .sanctuary-profile-copy blockquote { max-width:12rem; }
 .sanctuary-ascend { padding:7px 9px; gap:6px; font-size:.94rem; }
 .sanctuary-ascend small { font-size:.54rem; margin-left:0; }
 .sanctuary-essence { padding-top:20px; }
 .essence-resource { grid-template-columns:46px minmax(0,1fr) auto; gap:10px; min-height:92px; }
 .resource-medallion { width:45px; height:45px; }
 .resource-heat img { width:26px; height:30px; }
 .blood-emblem { height:32px; }
 .resource-copy strong { font-size:1.28rem; }
 .resource-copy small { font-size:.88rem; }
 .resource-value { max-width:6rem; white-space:normal; }
 .resource-heat-balance { font-size:1.45rem; letter-spacing:.04em; overflow-wrap:anywhere; }
 .sanctuary-setting { grid-template-columns:52px minmax(0,1fr); gap:8px; padding-right:11px; }
 .sanctuary-setting > img { width:50px; height:50px; }
 .sanctuary-setting > span { grid-column:2; margin-top:-6px; }
}
@container (max-width:340px) {
 .sanctuary-header { grid-template-columns:1fr auto; }
 .sanctuary-header-mark { display:none; }
 .sanctuary-heading span:first-child { font-size:1.4rem; }
 .sanctuary-heading span:last-child { font-size:.66rem; }
 .sanctuary-profile-copy { width:69%; }
 .sanctuary-mortal { font-size:1.7rem; letter-spacing:.09em; }
 .essence-resource { grid-template-columns:43px minmax(0,1fr); gap:5px 10px; }
 .resource-value { grid-column:2; margin-bottom:5px; }
 .sanctuary-pact { grid-template-columns:75px minmax(0,1fr) 25px; gap:5px; }
 .pact-orbit { width:25px; height:25px; font-size:1.1rem; }
}
@media (max-width:350px) {
 .app-dock-link { letter-spacing:.02em; }
 .app-dock-link img { width:22px; height:22px; }
}
/* A rem-based query responds to enlarged type without shrinking body copy. */
@container (max-width:18rem) {
 .sanctuary-header { grid-template-columns:1fr auto; grid-template-areas:'close mark' 'heading heading'; row-gap:12px; }
 .sanctuary-close { grid-area:close; }
 .sanctuary-heading { grid-area:heading; }
 .sanctuary-header-mark { grid-area:mark; }
 .sanctuary-profile-copy { width:100%; }
 .sanctuary-profile-copy h1 { font-size:3.5rem; }
 .sanctuary-mortal { white-space:normal; overflow-wrap:anywhere; }
 .sanctuary-scene::after { background:linear-gradient(90deg,#070609c9,#07060980 72%,transparent); }
 .essence-resource { grid-template-columns:46px minmax(0,1fr); gap:8px 10px; }
 .resource-value { grid-column:2; max-width:100%; }
 .resource-copy small { overflow-wrap:anywhere; }
 .pact-orbit { font-size:24px; }
}
@media (min-width:760px) { .app-dock { bottom:12px; } }
@media (prefers-reduced-motion:reduce) {
 .sanctuary-scene *, .app-dock-link, .app-dock-link::before { animation:none !important; transition:none !important; }
}
@media (prefers-reduced-transparency:reduce) {
 .app-dock-rail { background:linear-gradient(180deg,#211b20,#0b0a0e); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-contrast:more) {
 .sanctuary-shell,.sanctuary-essence,.sanctuary-pact,.sanctuary-setting,.app-dock-rail { border-color:#e2bea0; }
 .app-dock-rail { background:linear-gradient(180deg,#211b20,#09080c); -webkit-backdrop-filter:none; backdrop-filter:none; }
 .app-dock-link { color:#f3e4d1; }
 .app-dock-link[aria-current='page'] { border-color:#f6dec0; background:#322331; }
 .sanctuary-scene::after { background:linear-gradient(90deg,#050407ef,#050407c9 65%,#0504075c),linear-gradient(0deg,#050407,transparent 55%); }
 .sanctuary-setting > span,.resource-soon,.sanctuary-preview { color:#f1d4b7; }
}
@media (forced-colors:active) {
 .app-dock-rail { background:Canvas; border-color:CanvasText; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
 .app-dock-rail::before,.app-dock-rail::after,.app-dock-link[aria-current='page']::after { display:none; }
 .app-dock-link { color:CanvasText; }
 .app-dock-link[aria-current='page'] { color:HighlightText; background:Highlight; border-color:Highlight; box-shadow:none; }
 .app-dock-link:focus-visible { outline-color:Highlight; }
}