/* ============================================================================
   CULTURE CAVE - THE DESCENT
   The artwork IS the cave. No drawn ceilings, no god rays, no shafts of light.
   The owner's painting carries the room; this layer only makes the words
   legible on top of it and hangs a rope down the right so scrolling reads as
   climbing down. Cheap on purpose: one image, one scrim, one moving element.
   ========================================================================== */

:root{
  --dsc-img:url("plates/hero-owner-md.webp");
  --dsc-rope:#C9A77A;
  --dsc-rope-d:#7A5C38;
}
@media(min-width:1201px){:root{--dsc-img:url("plates/hero-owner-lg.webp")}}
@media(max-width:760px){:root{--dsc-img:url("plates/hero-owner-sm.webp")}}

/* ---------------------------------------------------------------- the room */
/* cave-v3.css kills .hero::before with !important, so the painting goes on the
   element itself; the scrim takes ::after, which nothing claims with force. */
.hero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--dsc-img) 34% 46%/cover no-repeat}
/* Legibility only, and as little of it as the words will tolerate: a band
   behind the type, clear at the top so the ceiling reads as a ceiling. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:none;
  background:
    linear-gradient(180deg,
      rgba(6,3,16,.30) 0,
      rgba(6,3,16,.16) 20%,
      rgba(6,3,16,.44) 52%,
      rgba(6,3,16,.74) 100%),
    radial-gradient(64% 42% at 50% 44%, rgba(6,3,16,.34), transparent 74%)}
.hero>*{position:relative;z-index:2}
/* the base sheet's own hero art and starfield are redundant now */
.hero .hbg,.hero .stars{display:none!important}

.hero h1{text-shadow:0 2px 30px rgba(4,2,12,.75),0 1px 3px rgba(4,2,12,.6)}
.hero .sub{color:#EAF0FB;text-shadow:0 1px 16px rgba(4,2,12,.7)}
.hero .herocap{color:#CFE0F2}

/* ------------------------------------------------------------------ THE RIG
   A real caving rig down the right edge, not a drawn line. Kernmantle rope:
   two counter-rotating braids over a cylinder shade, so it reads as a woven
   sheath rather than a candy stripe. Hardware is dropped forged steel and
   anodised alloy. The whole rail is a scrubber: click anywhere on the rope and
   you go to that depth.
   ------------------------------------------------------------------------- */
.rope{position:fixed;top:var(--dsc-rope-top,150px);bottom:0;
  right:clamp(4px,2.2vw,30px);width:44px;z-index:70;display:block;
  pointer-events:none;-webkit-user-select:none;user-select:none}
.rope.off{display:none}

/* the hanger the rope is anchored to at the lip */
.rope-anchor{position:absolute;left:50%;top:-11px;width:26px;height:22px;
  margin-left:-13px;z-index:3}

/* --------------------------------------------------------------- the rope */
.rope-l{position:absolute;left:50%;top:8px;bottom:0;width:11px;margin-left:-5.5px;
  border-radius:6px;cursor:pointer;pointer-events:auto;
  background:
    /* braid, one way */
    repeating-linear-gradient(-64deg,
      rgba(255,255,255,.20) 0 1.5px, rgba(255,255,255,0) 1.5px 4px,
      rgba(0,0,0,.34) 4px 5.5px, rgba(0,0,0,0) 5.5px 9px),
    /* braid, the other way */
    repeating-linear-gradient(64deg,
      rgba(0,0,0,.24) 0 2px, rgba(0,0,0,0) 2px 5px,
      rgba(255,255,255,.10) 5px 6.5px, rgba(255,255,255,0) 6.5px 10px),
    /* the black tracer fleck every real rope has */
    repeating-linear-gradient(-64deg,
      #1C1A19 0 1.6px, rgba(0,0,0,0) 1.6px 16px),
    /* sheath colour */
    repeating-linear-gradient(-64deg,
      #E8791F 0 5px, #F6A340 5px 8px, #C15C10 8px 12px),
    /* cylinder */
    linear-gradient(90deg,
      rgba(0,0,0,.62) 0, rgba(0,0,0,.18) 26%,
      rgba(255,255,255,.16) 44%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.58) 100%);
  box-shadow:0 0 12px rgba(0,0,0,.6), inset 0 0 3px rgba(0,0,0,.4)}
.rope-l::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}

/* the rope frays into the dark at the bottom instead of being cut off */
.rope-fade{position:absolute;left:0;right:0;bottom:0;height:90px;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,3,16,0),var(--void,#06030F) 82%)}

/* --------------------------------------------------------- the gear on it */
.rope-g{position:absolute;left:50%;width:34px;height:34px;margin-left:-17px;
  pointer-events:auto;cursor:pointer;
  transform:translateY(-50%);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.75));
  transition:transform var(--t-2) var(--e-out),filter var(--t-2) var(--e-out)}
.rope-g svg{width:100%;height:100%;display:block}
.rope-g:hover,.rope-g:focus-visible{transform:translateY(-50%) scale(1.16);
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.85)) drop-shadow(0 0 12px rgba(255,150,60,.5))}
.rope-g:focus-visible{outline:none}
/* the section it takes you to */
.rope-g b{position:absolute;right:44px;top:50%;transform:translateY(-50%) translateX(6px);
  font-family:var(--mono);font-size:10.8px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#F4E9DC;white-space:nowrap;
  background:rgba(10,6,4,.9);border:1px solid rgba(232,121,31,.42);
  border-radius:6px;padding:6px 10px;opacity:0;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.6);
  transition:opacity var(--t-2) var(--e-out),transform var(--t-2) var(--e-out)}
.rope-g:hover b,.rope-g:focus-visible b{opacity:1;transform:translateY(-50%) translateX(0)}
.rope-g.on{filter:drop-shadow(0 3px 6px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(255,160,70,.55))}

/* ------------------------------------------------- the ascender you ride on */
.rope-d{position:absolute;left:50%;top:0;width:38px;height:44px;margin-left:-19px;
  z-index:4;will-change:transform;pointer-events:none;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.8))}
.rope-d svg{width:100%;height:100%;display:block}
/* the lamp on the helmet actually throws light down the rope */
.rope-beam{position:absolute;left:50%;top:34px;width:120px;height:150px;
  margin-left:-60px;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(50% 62% at 50% 0%,rgba(255,214,150,.5),transparent 72%)}
.rope-m{position:absolute;right:46px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:11.6px;letter-spacing:.12em;font-weight:600;
  color:#FFE9CE;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.95);
  opacity:0;transition:opacity var(--t-2) var(--e-out)}
.rope.live .rope-m{opacity:.94}

/* scrubbing: a hairline where you are about to land */
.rope-hit{position:absolute;left:50%;width:26px;height:2px;margin-left:-13px;
  background:linear-gradient(90deg,transparent,#FFD79A,transparent);
  opacity:0;pointer-events:none;transition:opacity 90ms linear}
.rope.scrub .rope-hit{opacity:.95}

@media(max-width:860px){
  /* hard against the edge: page content reaches x=374 at 390 wide, so the rope
     and its touch padding have to live entirely to the right of that or it
     steals taps from the buttons underneath it */
  .rope{width:18px;right:0}
  .rope-l{width:7px;margin-left:-3.5px}
  .rope-g{width:25px;height:25px;margin-left:-12.5px}
  .rope-g b{display:none}
  .rope-d{width:28px;height:33px;margin-left:-14px}
  .rope-m,.rope-beam{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rope-d{transition:none}
}


/* ---------------------------------------------------------------------------
   FIT THE ROOM TO THE PAINTING
   The painting is 1.75:1. The hero was running about 1.15:1, so `cover` threw
   away a third of the picture at the sides and zoomed the middle. Tightening
   the hero to roughly the painting's own ratio shows the whole cavern AND
   removes the dead space that was under the stats.
   ------------------------------------------------------------------------- */
.hero .heroin{padding:clamp(34px,4.4vw,58px) 0 clamp(26px,3vw,40px)}
.hero h1{margin:6px 0 0}
.hero .sub{margin-top:clamp(12px,1.5vw,18px)}
.hero .orn{margin:clamp(14px,1.8vw,20px) auto}
.hero .bigsearch{margin-top:clamp(14px,1.8vw,20px)}
.hero .trending{margin-top:clamp(12px,1.5vw,17px)}
.hero .hstats{margin-top:clamp(18px,2.2vw,26px)}

/* the headline sits over the brightest part of the ceiling, so it gets its own
   pool of shade rather than darkening the whole picture */
.hero .heroin::before{content:"";position:absolute;left:50%;top:0;
  width:min(112%,1080px);height:58%;transform:translateX(-50%);
  z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(52% 50% at 50% 42%,rgba(5,2,14,.62),transparent 72%)}
.hero .heroin{position:relative}

/* the rope hangs from under the header, not across the announcement bar */
.rope{top:var(--dsc-rope-top,150px)}
@media(max-width:1100px){.rope{--dsc-rope-top:120px}}

/* The ornament repeats the eyebrow word for word directly above it. One of
   them has to go, and the eyebrow is the one carrying the location. */
.hero .orn{display:none}

/* The headline crosses the brightest part of the ceiling. Give it a deeper
   pool of shade and a harder edge so the gradient face still reads. */
.hero .heroin::before{
  background:radial-gradient(54% 52% at 50% 40%,rgba(4,2,12,.78),rgba(4,2,12,.34) 62%,transparent 76%)}
.hero h1{text-shadow:0 2px 34px rgba(3,1,10,.92),0 2px 8px rgba(3,1,10,.8),0 1px 2px rgba(3,1,10,.7)}

.hero .sub{text-shadow:0 1px 20px rgba(3,1,10,.9),0 1px 3px rgba(3,1,10,.75)}

/* The first line is normally painted by clipping --grad3 to the glyphs. Over a
   lit cave those mid-tone stops have almost no luminance and the line vanishes,
   and the clip fights every attempt to lift it. In the hero it is simply set
   solid, bright, and legible; line two stays white, so the two-tone reads. */
.hero .heroin h1 span.grad{
  background:none!important;background-image:none!important;
  -webkit-text-fill-color:#9FE4FF!important;color:#9FE4FF!important;
  text-shadow:0 2px 26px rgba(3,1,10,.95),0 1px 4px rgba(3,1,10,.85)}

/* The v2 descent rail did this job before the rope existed, and it now sits
   directly on top of it. The rope supersedes it. */
.descent,.dbarline{display:none!important}

/* An 8px rope is far below the 44px touch minimum, so on coarse pointers the
   rope and the gear get an invisible hit area either side. The drawing does not
   change; only what your thumb can find does. */
@media (pointer:coarse){
  /* the padding grows to the RIGHT, into the margin, never left into content */
  .rope-l::before{content:"";position:absolute;top:0;bottom:0;left:-4px;right:-9px}
  .rope-g::before{content:"";position:absolute;top:-11px;bottom:-11px;left:-4px;right:-9px}
  /* the helmet is the abseil handle on touch, so it has to be grabbable */
  .rope-d{pointer-events:auto;touch-action:none}
  .rope-d::before{content:"";position:absolute;inset:-8px -14px}
}

/* The v1 tunnel furniture is no longer built, and it must never take part in
   layout again if an old cave.js is still cached: .throat and .pool are IN FLOW
   and were adding ~854px of empty hero under the content. */
.hero .tunnel,.hero .throat,.hero .pool{display:none!important}

/* The stalk menu takes the whole screen: its panels (the vendor roster, a room)
   and the cave map sit above the page, and the rope was drawing straight through
   them. body.stalking is set on open and cleared on close, so the rope comes
   back by itself. */
body.stalking .rope,
body.stalking .torch-exit{display:none}