/* Above the Mist: intention, pact and reading share one visual language. */
.brand > span { font-size:25px; letter-spacing:4px; white-space:nowrap; }
.brand small { font:10px/1.7 var(--sans); letter-spacing:5px; }
.brand svg { width:43px; height:48px; flex:none; }
.topic-heading { display:flex; align-items:center; justify-content:space-between; margin:12px 0; color:var(--gold); }
.topic-heading small { color:var(--muted); font-size:11px; }
.reading-page .topic-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.topic-choice { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:76px; padding:10px 2px; border:1px solid #b79a653d; border-radius:4px; background:linear-gradient(155deg,#182526,#101a1d); color:#a7b0aa; }
.topic-choice svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.topic-choice strong { font:18px/1.3 var(--serif); letter-spacing:1px; white-space:nowrap; }
.topic-choice small,.topic-choice i { display:none; }
.topic-choice.active { border-color:#ddc595; color:#ecdcba; background:radial-gradient(ellipse at 50% 20%,#667c6535,transparent 80%),#25332f; box-shadow:inset 0 0 0 2px #d7bc7c10; }
.topic-choice.active i { opacity:1; }
.topic-choice:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.depth-choice strong { font:25px/1.5 var(--serif); letter-spacing:3px; }
.depth-choice small { font-size:11px; }
.local-insight > details > summary { color:var(--gold); font:22px/1.7 var(--serif); cursor:pointer; padding:20px 0; border-block:1px solid var(--line); }
.insight-invitation h2 { font:21px/1.7 var(--serif); color:var(--gold); }
.spirit-summoning { text-align:center; margin:34px auto; }
.spirit-summoning p { font:15px/2 var(--serif); color:var(--muted); letter-spacing:2px; }
.spirit-unseen { position:relative; width:min(250px,65vw); aspect-ratio:2/3; margin:0 auto 26px; border-radius:6px; box-shadow:0 12px 35px #0006; }
.spirit-unseen .card-back { transform:none; }
.spirit-card .card-shell { width:100%; height:auto; aspect-ratio:2/3; }
.spirit-seal { color:var(--gold); font:14px/2 var(--serif); letter-spacing:2px; }
.spirit-api { max-width:740px; margin:35px auto 0; border:1px solid var(--line); border-radius:10px; padding:20px; scroll-margin-top:110px; }
.spirit-api summary { cursor:pointer; color:var(--gold); font:21px/1.8 var(--serif); }
.spirit-api summary small { display:block; font:11px/1.6 var(--sans); color:var(--muted); margin-top:4px; }
.spirit-api p { font:12px/1.9 var(--sans); color:var(--muted); }
.spirit-api label { display:block; color:var(--gold); font-size:12px; margin:18px 0; }
.spirit-api input { display:block; width:100%; margin-top:8px; border:1px solid var(--line); background:#111b1a; color:var(--cream); padding:13px; border-radius:6px; box-sizing:border-box; }
.spread-position-guide { list-style-type:upper-roman; }
@media(max-width:600px){
 .brand > span { font-size:22px; letter-spacing:3px; }
 .brand small { font-size:9px; letter-spacing:4px; }
 .brand svg { width:35px; height:42px; }
 .reading-page > h1 { font-size:25px; }
 .reading-page .topic-row { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
 .topic-choice { min-height:70px; padding:9px 2px; gap:5px; }
 .topic-choice strong { font-size:clamp(15px,4vw,18px); }
 .reading-page .spread-depths { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .depth-choice { padding:11px 6px; }
 .spirit-api { padding:18px 15px; }
 .spirit-page > h1 { font-size:25px; }
}
.shuffle-page { animation:none; }
.shuffle-stage { position:relative; width:min(100%,760px); height:min(58vh,660px); min-height:270px; margin:0 auto; overflow:hidden; }
.shuffle-surface { display:block; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.shuffle-back-source { display:none; }
.shuffle-flight { position:fixed; z-index:40; pointer-events:none; }
.ritual-arriving { animation:none !important; }
.ritual-arriving > :not(.ritual-flow):not(.ritual-return) { opacity:0; }
.ritual-arriving .ritual-flow { pointer-events:none; }
.ritual-arriving .flow-cards { visibility:hidden; }
.ritual-page > :not(.ritual-flow):not(.ritual-return) { transition:opacity .55s ease; }
@media(max-width:600px){ .shuffle-stage { height:auto; flex:1; min-height:200px; } }