/* ============================================================================
   CULTURE CAVE - THE STALK, dressed
   Hyphae's gesture, Culture Cave's hand: the handle is a carved slab with the
   house spore on it, the branches grow on a lit filament, and the node under
   your thumb fills with the brand gradient.
   ========================================================================== */

/* ---------------------------------------------------------------- the handle
   It sits above the fold of the page rather than in a dock, because Culture
   Cave has no dock: it is a marketplace, not an app shell. */
#cc-stalk-handle{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:191;
  display:inline-flex;align-items:center;gap:11px;
  padding:12px 20px 12px 16px;border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--uv-ice,#7FEBFF);
  background:rgba(8,4,18,.9);
  border:1px solid rgba(var(--glow-v),.5);
  box-shadow:0 0 0 1px rgba(var(--glow-v),.16),
             0 10px 34px -10px rgba(var(--glow-v),.8),
             0 22px 50px -26px #000,
             inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,border-color .22s ease;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none}
#cc-stalk-handle:hover{transform:translateX(-50%) translateY(-2px);
  border-color:rgb(var(--glow-m));
  box-shadow:0 0 0 1px rgba(var(--glow-m),.3),
             0 14px 40px -10px rgba(var(--glow-m),.9),0 24px 56px -26px #000}
#cc-stalk-handle.pulling{transform:translateX(-50%) scale(.97)}
#cc-stalk-handle:focus-visible{outline:2px solid rgb(var(--glow-m));outline-offset:4px}
/* the house mark, breathing */
#cc-stalk-handle .sk-spore{width:17px;height:17px;flex:none;
  background:linear-gradient(120deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));
  -webkit-mask:var(--spore) center/contain no-repeat;mask:var(--spore) center/contain no-repeat;
  animation:skbreath 4.5s ease-in-out infinite}
@keyframes skbreath{0%,100%{opacity:.8;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
#cc-stalk-handle .sk-n{font-size:10px;letter-spacing:.08em;color:var(--ink-mut,#6E839E);
  padding-left:11px;border-left:1px solid rgba(var(--glow-v),.28)}
@media (prefers-reduced-motion:reduce){#cc-stalk-handle .sk-spore{animation:none}}
/* out of the way while a full-screen overlay is up */
.wf-ov.on ~ #cc-stalk-handle,body:has(.qv.on) #cc-stalk-handle{opacity:0;pointer-events:none}
@media(max-width:520px){
  #cc-stalk-handle{padding:11px 16px 11px 13px;gap:9px;font-size:10.5px;letter-spacing:.16em}
  #cc-stalk-handle .sk-n{display:none}
  #cc-stalksay{max-width:min(300px,88vw);padding:9px 14px}
  #cc-stalksay b{font-size:15px}
  #cc-stalksay s{font-size:9.8px;letter-spacing:.04em}
}

/* ----------------------------------------------------------- the menu layer */
/* The veil colour sits on the layer itself as well as on its child. On a phone
   the child alone was not painting, and a menu you cannot read the page behind
   is better than a menu with the page shouting through it. The z-index clears
   everything the page itself uses. */
#cc-stalk{position:fixed;inset:0;z-index:190;pointer-events:none;opacity:0;
  background:rgba(5,2,12,.92);
  transition:opacity .18s ease}
#cc-stalk.on{opacity:1;pointer-events:auto}
/* THE VEIL IS TRANSLUCENT. Never hide the page you are navigating away from:
   the whole complaint about a modal drawer is that it covers what you were
   reading in order to help you leave it. */
/* Translucent, but only just: you should still know what you are leaving,
   without the page competing with the branches you are choosing between. */
#cc-stalk .sk-veil{position:absolute;inset:0;
  background:rgba(5,2,12,.90);
  -webkit-backdrop-filter:blur(6px) saturate(.85);backdrop-filter:blur(6px) saturate(.85)}
#cc-stalklines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the filament: the same two hues everything else in the cave glows with */
.sk-live{fill:none;stroke:url(#ccstalkgrad);stroke-width:2.5;stroke-linecap:round;
  opacity:.9;filter:drop-shadow(0 0 6px rgba(var(--glow-v),.8))}
#cc-stalknodes{position:absolute;inset:0}

.sk-node{position:absolute;transform:translate(-50%,-50%) scale(.5);opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:var(--slot,92px);
  cursor:pointer;
  transition:opacity .18s ease,transform .3s cubic-bezier(.34,1.4,.64,1)}
.sk-node.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sk-disc{position:relative;width:48px;height:48px;border-radius:50%;display:grid;
  place-items:center;
  background:rgba(10,5,22,.92);
  border:1px solid rgba(var(--glow-v),.45);
  color:var(--uv-ice,#7FEBFF);
  box-shadow:0 0 18px -6px rgba(var(--glow-v),.7),0 10px 24px -12px #000;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),background .18s,border-color .18s,box-shadow .18s}
.sk-node b{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;font-weight:600;
  color:#CFE6FA;text-align:center;max-width:100%;line-height:1.28;
  /* the name shrinks a little when its slot is tight rather than colliding */
  font-size:clamp(9.4px,calc(var(--slot,92px) * .118),10.8px);
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 8px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8)}
/* a branch you have already passed through */
.sk-node.via .sk-disc{background:rgba(var(--glow-v),.16);border-color:rgba(var(--glow-v),.75)}
/* the one under your thumb */
.sk-node.at .sk-disc{background:linear-gradient(122deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));
  color:#04020A;border-color:transparent;transform:scale(1.2);
  box-shadow:0 0 30px -4px rgba(var(--glow-m),.95),0 12px 30px -12px #000}
.sk-node.at b{color:#fff;font-weight:700}
.sk-node:hover .sk-disc{transform:scale(1.1);border-color:rgb(var(--glow-m))}
.sk-cnt{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;
  padding:0 5px;background:var(--uv-mag,#FF14C4);color:#fff;
  font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:18px;text-align:center;
  box-shadow:0 0 10px rgba(var(--glow-m),.9)}

/* a pill says what releasing will do, BEFORE it commits */
#cc-stalksay{position:absolute;left:50%;transform:translateX(-50%);max-width:82vw;z-index:3;
  padding:10px 17px;border-radius:14px;text-align:center;
  background:rgba(8,4,18,.94);border:1px solid rgba(var(--glow-v),.4);
  box-shadow:0 0 26px -8px rgba(var(--glow-v),.7),0 18px 40px -20px #000;
  transition:top .18s ease}
#cc-stalksay b{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:16px;color:#fff;letter-spacing:.01em}
#cc-stalksay b svg{color:var(--uv-cyan,#14C4FF)}
#cc-stalksay s{display:block;text-decoration:none;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.06em;color:var(--ink-mut,#6E839E);margin-top:4px}

/* a depth gauge teaches the gesture without a tutorial */
#cc-stalkdepth{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
#cc-stalkdepth i{width:20px;height:3px;border-radius:999px;
  background:rgba(var(--glow-v),.22);transition:background .18s,box-shadow .18s}
#cc-stalkdepth i.on{background:rgb(var(--glow-m));box-shadow:0 0 8px rgba(var(--glow-m),.9)}

/* the hint, once, then never again */
.sk-hint{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));
  z-index:93;transform:translateX(-50%);pointer-events:none;
  display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  background:rgba(var(--glow-v),.14);border:1px solid rgba(var(--glow-v),.45);
  color:var(--uv-ice,#7FEBFF);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;
  animation:skfade 8s ease forwards}
@keyframes skfade{0%{opacity:0;transform:translate(-50%,10px)}
  9%{opacity:1;transform:translate(-50%,0)}86%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sk-hint{animation:none;opacity:1}}

/* while the menu is open the page underneath stops scrolling out from under it */
body.stalking{overflow:hidden}

/* ============================================================================
   THE STALK v2 - finding, and the trail
   Once the menu holds the whole catalogue, walking to a thing is slower than
   naming it. Any keystroke turns the web into a launcher.
   ========================================================================== */
#cc-stalkfind{position:absolute;left:50%;top:clamp(64px,13vh,150px);transform:translateX(-50%);
  width:min(520px,90vw);display:none;z-index:4}
#cc-stalk.finding #cc-stalkfind{display:block}
#cc-stalk.finding #cc-stalksay{display:none}
.sk-fbar{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:14px;
  background:rgba(8,4,18,.96);border:1px solid rgba(var(--glow-v),.5);
  box-shadow:0 0 30px -8px rgba(var(--glow-v),.8),0 20px 44px -22px #000}
.sk-fic{display:grid;place-items:center;color:var(--uv-cyan,#14C4FF);flex:none}
#cc-stalkq{flex:1;min-width:0;background:none;border:0;outline:none;color:#EAF6FF;
  font-family:var(--sans);font-size:16px;letter-spacing:.005em}
#cc-stalkq::placeholder{color:var(--ink-mut,#6E839E)}
.sk-fesc{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-mut,#6E839E);
  border:1px solid rgba(var(--glow-v),.3);border-radius:6px;padding:3px 7px;flex:none}
#cc-stalkhits{margin-top:10px;display:grid;gap:6px;max-height:min(52vh,420px);overflow:auto;
  overscroll-behavior:contain;padding-right:2px}
.sk-hit{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:10px 13px;border-radius:11px;
  background:rgba(10,5,22,.9);border:1px solid rgba(var(--glow-v),.24);
  color:#EAF6FF;font-family:inherit;transition:border-color .15s,background .15s,transform .15s}
.sk-hit:hover,.sk-hit.on{border-color:rgb(var(--glow-m));background:rgba(var(--glow-v),.14);
  transform:translateX(3px)}
.sk-hit .hi{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  background:rgba(var(--glow-v),.12);color:var(--uv-ice,#7FEBFF)}
.sk-hit.on .hi{background:linear-gradient(122deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));color:#04020A}
.sk-hit .ht{min-width:0;flex:1}
.sk-hit .ht b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-hit .ht s{display:block;text-decoration:none;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-mut,#6E839E);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-hit .hc{font-family:var(--mono);font-size:11px;color:var(--uv-mag,#FF14C4);flex:none}
.sk-none{padding:22px;text-align:center;color:var(--ink-mut,#6E839E);
  font-family:var(--mono);font-size:12px}

/* the trail: how you got to where the readout is pointing */
#cc-stalksay u{display:block;text-decoration:none;font-family:var(--mono);font-size:9.8px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--uv-cyan,#14C4FF);margin-bottom:5px;
  opacity:.85}

@media(max-width:520px){
  #cc-stalkfind{top:56px;width:calc(100vw - 28px)}
  #cc-stalkq{font-size:16px}
  .sk-hit{padding:9px 11px;gap:10px}
  .sk-hit .ht b{font-size:13.5px}
}

/* the deep link opens without the fade, so a capture of it is repeatable */
#cc-stalk.nofade,#cc-stalk.nofade .sk-node{transition:none!important}

/* the branch you came through: present, but plainly behind you */
.sk-node.via{z-index:1}
.sk-node.via .sk-disc{width:38px;height:38px;opacity:.9}
.sk-node.via .sk-disc svg{width:15px;height:15px}
.sk-node.via b{font-size:9.5px;opacity:.75;letter-spacing:.06em}
.sk-node.via .sk-cnt{transform:scale(.8)}

/* a long strain name must ellipsis inside the row, not push the row wider than
   the phone: every level of the flex chain needs to be allowed to shrink */
#cc-stalkhits{width:100%}
.sk-hit{max-width:100%;box-sizing:border-box}
.sk-hit .ht{overflow:hidden;min-width:0}
.sk-hit .ht b,.sk-hit .ht s{max-width:100%}
/* an auto grid track sizes to its items' max-content, and a nowrap strain name
   has a very large one, so the track has to be told it may not exceed the box */
#cc-stalkhits{grid-template-columns:minmax(0,1fr)}

/* ============================================================================
   THE STALK - EXTREME. The menu is the shop.
   Reaching a listing inside the menu and then being thrown out to a page to act
   on it defeats the point, so the listing opens in place with the arc still
   behind it and the basket on the handle.
   ========================================================================== */
#cc-stalkpanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
  width:min(460px,calc(100vw - 28px));max-height:min(84vh,720px);overflow:auto;
  overscroll-behavior:contain;display:none;opacity:0;z-index:6;
  border-radius:18px;background:rgba(9,5,20,.985);
  border:1px solid rgba(var(--glow-v),.5);
  box-shadow:0 0 0 1px rgba(var(--glow-v),.18),
             0 0 70px -14px rgba(var(--glow-v),.85),0 40px 90px -40px #000;
  transition:opacity .2s ease,transform .26s cubic-bezier(.34,1.4,.64,1)}
#cc-stalk.shopping #cc-stalkpanel{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)}
#cc-stalk.shopping #cc-stalksay,#cc-stalk.shopping #cc-stalkdepth{opacity:.25}
.sp-x{position:absolute;top:11px;right:11px;z-index:3;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(6,3,14,.8);border:1px solid rgba(var(--glow-v),.4);color:var(--uv-ice,#7FEBFF)}
.sp-x:hover{border-color:rgb(var(--glow-m));color:#fff}
.sp-art{aspect-ratio:16/10;background:rgba(var(--glow-v),.07);overflow:hidden;
  border-bottom:1px solid rgba(var(--glow-v),.22)}
.sp-art img{width:100%;height:100%;object-fit:cover;display:block}
.sp-body{padding:18px 18px 20px}
.sp-ven{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mut,#6E839E)}
.sp-body h4{font-family:var(--display);font-size:20px;line-height:1.2;margin:8px 0 0;color:#fff}
.sp-price{display:flex;align-items:baseline;gap:12px;margin-top:12px}
.sp-price b{font-family:var(--mono);font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.sp-stk{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--uv-green,#5BFF9E)}
.sp-stk.out{color:var(--ink-mut,#6E839E)}
.sp-var{width:100%;margin-top:14px;padding:11px 13px;border-radius:10px;
  background:rgba(var(--glow-v),.08);border:1px solid rgba(var(--glow-v),.32);
  color:#EAF6FF;font-family:inherit;font-size:14.5px;outline:none}
.sp-var:focus{border-color:rgb(var(--glow-v))}
.sp-row{display:flex;gap:10px;margin-top:14px}
.sp-qty{display:inline-flex;align-items:center;flex:none;border-radius:10px;overflow:hidden;
  border:1px solid rgba(var(--glow-v),.32);background:rgba(var(--glow-v),.06)}
.sp-qty button{width:38px;height:44px;border:0;background:none;cursor:pointer;
  color:var(--uv-ice,#7FEBFF);font-size:17px;line-height:1}
.sp-qty button:hover{background:rgba(var(--glow-v),.16)}
.sp-qty b{min-width:34px;text-align:center;font-family:var(--mono);font-size:15px;color:#fff}
.sp-add{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:10px;cursor:pointer;padding:0 18px;height:46px;
  background:linear-gradient(122deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));
  color:#04020A;font-family:inherit;font-weight:800;font-size:14.5px;
  box-shadow:0 0 26px -8px rgba(var(--glow-m),.9);
  transition:transform .16s,box-shadow .16s}
.sp-add:hover{transform:translateY(-1px);box-shadow:0 0 36px -6px rgba(var(--glow-m),1)}
.sp-add:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.sp-full{display:block;text-align:center;margin-top:14px;padding:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--uv-ice,#7FEBFF)}
.sp-full:hover{color:rgb(var(--glow-m))}

/* a listing on the shelf wears its price and a warmer rim than a place does */
.sk-node .sk-disc.buy{border-color:rgba(var(--glow-m),.55)}
.sk-node.at .sk-disc.buy{border-color:transparent}
.sk-node u{display:block;text-decoration:none;font-family:var(--mono);font-size:10px;
  letter-spacing:.04em;color:var(--uv-mag,#FF14C4);margin-top:1px;
  text-shadow:0 1px 8px rgba(0,0,0,.95)}

/* the basket, on the handle, because the menu is also the cart button */
#cc-stalk-handle .sk-cart{min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  background:linear-gradient(122deg,var(--uv-cyan,#14C4FF),var(--uv-mag,#FF14C4));
  color:#04020A;font-family:var(--mono);font-size:10px;font-weight:700;line-height:19px;
  text-align:center;margin-left:-2px}
#cc-stalk-handle .sk-cart.pop{animation:skpop .45s cubic-bezier(.34,1.5,.64,1)}
@keyframes skpop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}

.sk-toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,10px);z-index:8;
  padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;
  background:rgba(8,4,18,.96);border:1px solid rgba(var(--glow-m),.5);
  color:#EAF6FF;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  box-shadow:0 0 26px -8px rgba(var(--glow-m),.9);
  transition:opacity .2s ease,transform .24s cubic-bezier(.34,1.4,.64,1);
  max-width:82vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:520px){
  #cc-stalkpanel{width:calc(100vw - 20px);max-height:86vh}
  .sp-art{aspect-ratio:3/2}
  .sp-body{padding:15px 15px 17px}
  .sp-body h4{font-size:18px}
}

/* ============================================================================
   THE ROOM - a place, opened inside the menu
   ========================================================================== */
#cc-stalkroom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.985);
  width:min(940px,calc(100vw - 24px));height:min(84vh,860px);
  display:none;opacity:0;z-index:7;flex-direction:column;overflow:hidden;
  border-radius:18px;background:rgba(7,4,16,.985);
  border:1px solid rgba(var(--glow-v),.5);
  box-shadow:0 0 0 1px rgba(var(--glow-v),.16),
             0 0 80px -16px rgba(var(--glow-v),.85),0 46px 100px -44px #000;
  transition:opacity .2s ease,transform .26s cubic-bezier(.34,1.4,.64,1)}
#cc-stalk.roomed #cc-stalkroom{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1)}
#cc-stalk.roomed #cc-stalksay,
#cc-stalk.roomed #cc-stalkdepth,
#cc-stalk.roomed #cc-stalknodes,
#cc-stalk.roomed #cc-stalklines{opacity:0;pointer-events:none}

.rm-bar{display:flex;align-items:center;gap:11px;flex:0 0 auto;padding:11px 12px;
  border-bottom:1px solid rgba(var(--glow-v),.28);background:rgba(10,5,22,.9)}
.rm-back,.rm-x,.rm-out{width:34px;height:34px;flex:none;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(var(--glow-v),.1);border:1px solid rgba(var(--glow-v),.3);
  color:var(--uv-ice,#7FEBFF);transition:.16s}
.rm-back{transform:scaleX(-1)}
.rm-back:hover,.rm-x:hover,.rm-out:hover{border-color:rgb(var(--glow-m));
  background:rgba(var(--glow-m),.16);color:#fff}
.rm-x{margin-left:0}
.rm-t{flex:1;min-width:0;line-height:1.25}
.rm-t b{display:block;font-family:var(--display);font-size:15.5px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-t s{display:block;text-decoration:none;font-family:var(--mono);font-size:9.8px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mut,#6E839E)}
.rm-body{position:relative;flex:1;min-height:0}
#cc-room{width:100%;height:100%;border:0;display:block;background:transparent}
.rm-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:11px;
  color:var(--ink-mut,#6E839E);font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  background:rgba(7,4,16,.96);text-align:center;padding:20px}
.rm-wait a{color:var(--uv-ice,#7FEBFF);text-decoration:underline}
.rm-wait span{width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid rgba(var(--glow-v),.28);border-top-color:rgb(var(--glow-v));
  animation:rmspin .8s linear infinite}
@keyframes rmspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rm-wait span{animation:none}}

@media(max-width:640px){
  #cc-stalkroom{width:calc(100vw - 14px);height:88vh;border-radius:16px}
  .rm-bar{padding:9px 10px;gap:9px}
  .rm-t b{font-size:14px}
  .rm-out{display:none}
}

/* A node on the outermost arc already carries an icon and a two-line name; the
   price makes it three lines and the ring stops being legible. The readout card
   above shows the price for whatever is highlighted, so the node does not need
   it on a narrow screen. This has to sit at the END of the file: the base
   `.sk-node u{display:block}` rule is further down than where it was first
   written, and a media query adds no specificity to beat it. */
@media(max-width:760px){
  .sk-node u{display:none}
}


/* ======================================================================= THE MAP
   A section drawing through the site. Each top-level branch is a stratum of rock
   at a labelled depth; its children are chambers cut into it; drilling a chamber
   opens a seam of real listings.

   THE GRID IS THE WHOLE TRICK. .sm-section is two columns, and every stratum
   contributes TWO children to it: a .sm-tick (the depth ruler segment) and a
   .sm-band (the rock). Because they are grid siblings on the same implicit row,
   the ruler segment is always exactly as tall as the band it measures, with no
   absolute positioning and nothing that can drift out of step. */
#cc-stalkmap{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;
  --sm-core:46px}
#cc-stalk.mapping #cc-stalkmap{display:flex}
/* the arc steps aside for the map, exactly the way it does for the search */
#cc-stalk.mapping #cc-stalknodes,
#cc-stalk.mapping #cc-stalklines,
#cc-stalk.mapping #cc-stalksay,
#cc-stalk.mapping #cc-stalkdepth{display:none!important}
#cc-stalk.finding #cc-stalkmap{display:none}

.sm-top{flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 132px 10px 12px;
  background:rgba(6,3,14,.96);border-bottom:1px solid rgba(var(--glow-v),.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sm-here{flex:0 0 auto;font:700 9.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mut,#7d8ba6);white-space:nowrap}
/* 16px EXACTLY, or iOS Safari zooms the whole overlay on focus and the visitor
   has to pinch back out of a map they can no longer read */
.sm-q{flex:1;min-width:0;height:38px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(var(--glow-v),.28);
  color:#EAF4FF;font:400 16px/1 var(--sans,system-ui);padding:0 12px;outline:none}
.sm-q::placeholder{color:rgba(220,235,255,.4)}
.sm-q:focus{border-color:rgba(var(--glow-m),.65);background:rgba(255,255,255,.08)}
/* The view switch is a direct child of the sheet, not of the map, so it is still
   there after you flip to the orbit. Top right in both views. */
#cc-stalkview{position:absolute;z-index:7;display:none;padding:3px;border-radius:999px;
  top:calc(10px + env(safe-area-inset-top,0px));right:12px;
  background:rgba(6,3,14,.92);border:1px solid rgba(var(--glow-v),.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#cc-stalk.on #cc-stalkview{display:inline-flex}
#cc-stalk.finding #cc-stalkview{display:none}
.sm-v{border:0;background:none;cursor:pointer;border-radius:999px;
  padding:0 11px;height:32px;color:var(--ink-mut,#7d8ba6);
  font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.sm-v.on{color:#06121e;background:linear-gradient(120deg,#14C4FF,#FF14C4)}
.sm-v:focus-visible{outline:2px solid #7FEBFF;outline-offset:2px}

.sm-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  position:relative;padding:0 12px calc(104px + env(safe-area-inset-bottom,0px)) 0}
.sm-section{display:grid;grid-template-columns:var(--sm-core) 1fr;align-items:stretch}

/* the ruler: a knotted rope with the depth in metres beside it */
.sm-tick{position:relative;padding-top:16px}
.sm-tick::before{content:"";position:absolute;right:11px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,
    rgba(var(--sm-rgb,20,196,255),.6) 0 7px, rgba(var(--sm-rgb,20,196,255),.1) 7px 13px)}
.sm-tick i{position:sticky;top:6px;display:block;text-align:right;padding-right:22px;
  font:700 9px/1 var(--mono);font-variant-numeric:tabular-nums;
  color:rgba(var(--sm-rgb,20,196,255),.85);font-style:normal}
.sm-tick em{position:absolute;right:7px;top:17px;width:10px;height:10px;border-radius:2px;
  transform:rotate(45deg);background:rgba(var(--sm-rgb,20,196,255),.9);
  box-shadow:0 0 12px rgba(var(--sm-rgb,20,196,255),.7)}
.sm-tick-end::before{bottom:auto;height:22px}

/* the rock */
.sm-band{padding:14px 0 18px 12px;border-top:1px solid rgba(var(--glow-v),.16);
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(var(--sm-rgb,20,196,255),.075),rgba(var(--sm-rgb,20,196,255),.02)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 7px)}
.sm-face{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.sm-ico{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(var(--sm-rgb,20,196,255),.16);color:#EAF4FF}
.sm-face h3{margin:0;font:400 17px/1.15 var(--display);color:#fff;letter-spacing:.01em}
.sm-lay{margin-left:auto;font:700 9px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-mut,#7d8ba6);white-space:nowrap}
.sm-all{flex-basis:100%;height:32px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px dashed rgba(var(--sm-rgb,20,196,255),.45);
  color:#CFE6FA;font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.sm-all:hover{background:rgba(var(--sm-rgb,20,196,255),.14)}

.sm-chambers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sm-ch{min-height:56px;padding:9px 10px;border-radius:11px;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;
  background:rgba(255,255,255,.045);border:1px solid rgba(var(--sm-rgb,20,196,255),.22);
  color:#CFE6FA;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.sm-ch:hover{background:rgba(var(--sm-rgb,20,196,255),.14);
  border-color:rgba(var(--glow-m),.5);transform:translateY(-1px)}
.sm-ch:focus-visible{outline:2px solid #7FEBFF;outline-offset:2px}
.sm-ch.open{background:rgba(var(--sm-rgb,20,196,255),.18);border-color:rgba(var(--glow-m),.6)}
.sm-chi{display:grid;place-items:center;color:rgba(var(--sm-rgb,20,196,255),.95)}
.sm-chn{font:600 12.5px/1.3 var(--sans,system-ui);color:#EAF4FF;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sm-chc,.sm-chd{font:700 9.5px/1 var(--mono);color:var(--uv-mag,#FF7BE5)}
.sm-hl{font-style:normal;background:rgba(255,20,196,.28);border-radius:3px;
  padding:0 2px;color:#fff}

/* the seam: real listings, spanning the full width under the chamber that opened it */
.sm-seam{grid-column:1/-1;margin:2px 0 4px;padding:9px;border-radius:11px;
  background:rgba(4,2,10,.6);border:1px solid rgba(var(--glow-m),.32)}
.sm-lots{display:flex;flex-direction:column;gap:6px}
.sm-lot{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;
  min-height:46px;padding:5px 8px;border-radius:9px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.04);border:1px solid rgba(var(--glow-v),.16);color:#CFE6FA}
.sm-lot:hover{background:rgba(var(--glow-m),.14);border-color:rgba(var(--glow-m),.5)}
.sm-lotart{width:38px;height:38px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.06);
  display:grid;place-items:center}
.sm-lotart img{width:100%;height:100%;object-fit:cover;display:block}
.sm-lott{min-width:0}
.sm-lott b{display:block;font:600 12px/1.28 var(--sans,system-ui);color:#EAF4FF;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-lott s{display:block;text-decoration:none;font:400 9.5px/1.3 var(--mono);
  color:var(--ink-mut,#7d8ba6);letter-spacing:.08em;text-transform:uppercase}
.sm-lotp{font:700 11px/1 var(--mono);color:var(--uv-mag,#FF7BE5);white-space:nowrap}
.sm-wait{font:400 11px/1.4 var(--mono);color:var(--ink-mut,#7d8ba6);padding:10px 4px}

.sm-none{grid-column:1/-1;padding:34px 16px;text-align:center}
.sm-none b{display:block;font:400 17px/1.3 var(--display);color:#fff;margin-bottom:14px}
.sm-hand{height:40px;padding:0 16px;border-radius:999px;cursor:pointer;
  background:linear-gradient(120deg,#14C4FF,#FF14C4);border:0;color:#06121e;
  font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.sm-floor{grid-column:2/-1;padding:14px 0 4px;font:700 9px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mut,#7d8ba6)}

@media(min-width:760px){
  #cc-stalkmap{--sm-core:64px}
  .sm-scroll{padding-right:26px}
  .sm-chambers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm-face h3{font-size:20px}
  .sm-all{flex-basis:auto;padding:0 14px}
  .sm-lots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1180px){
  .sm-chambers{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm-lots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .sm-ch{transition:none}
  .sm-ch:hover{transform:none}
}