/* ============================================================================
   CULTURE CAVE — "THE SHAFT" v4.0
   Loaded last. Replaces the v3 wallpaper-and-glass-boxes approach entirely.

   v3 put a painting behind floating rounded panels. That reads as a wallpaper
   with widgets on it, because nothing relates the content to the cave.

   v4 uses the composition the paintings already have. Every one of them is a
   portal: dark rock and glowing flora at the sides, a lit throat in the middle.
   So the page is a passage with a shaft of light falling down the centre. You
   read in the light. The cave stays vivid at the margins and breaks fully open
   at chosen moments. No panels, no floating boxes, no borders around content:
   the shaft is the surface.

   Everything here is a flat gradient or a pre-baked image. No runtime blur, no
   filters, no backdrop-filter on a phone, which is what was making it stick.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. THE PASSAGE
   ------------------------------------------------------------------------- */
.cavern{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;
  background:var(--void)}
.cavern .lyr{position:absolute;inset:0;
  background-position:center center;background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity 900ms cubic-bezier(.4,0,.2,1)}
.cavern .lyr.on{opacity:1}
.cavern .wash{display:none}          /* the plates are already wide; no blur underlay */
.cavern::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(4,2,12,var(--sky,.34)) 0,
    rgba(4,2,12,0) 22%,
    rgba(4,2,12,0) 74%,
    rgba(4,2,12,var(--floor,.5)) 100%)}
:root{--sky:.30;--floor:.44}
:root[data-theme="dark"]{--sky:.16;--floor:.30}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sky:.16;--floor:.30}}

html{background:var(--void)}
body{background:transparent}
body::before{display:none}
.cave-walls{display:none}
.ledge{display:none}
section.blk::before{display:none}
.hero .hbg{background-image:none!important}

/* ---------------------------------------------------------------------------
   2. THE SHAFT — a column of light falling through the passage.
   One flat gradient. It is painted by the sections themselves so consecutive
   sections form a single unbroken column, and a section can opt out to let the
   cave break all the way open.
   ------------------------------------------------------------------------- */
:root{
  --col:1180px;                 /* the lit column */
  --feather:230px;              /* how far the light falls off into the rock */
  --shaft:250,247,253;          /* the colour of the light */
  --shaft-a:.955;               /* how solid it is where you read */
  --shaft-edge:.0;
}
:root[data-theme="dark"]{--shaft:14,8,28;--shaft-a:.74}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--shaft:14,8,28;--shaft-a:.74}}

/* One gradient, held in a variable so every lit stretch paints the identical
   column and consecutive stretches read as one unbroken shaft. The selectors
   are qualified because `section.blk` on its own outranks a bare `.shafted`. */
:root{
  --shaft-bg:linear-gradient(90deg,
    rgba(var(--shaft),var(--shaft-edge)) 0,
    rgba(var(--shaft),var(--shaft-edge)) max(0px, calc(50% - var(--col)/2 - var(--feather))),
    rgba(var(--shaft),calc(var(--shaft-a) * .55)) calc(50% - var(--col)/2 - 40px),
    rgba(var(--shaft),var(--shaft-a))    calc(50% - var(--col)/2 + 74px),
    rgba(var(--shaft),var(--shaft-a))    calc(50% + var(--col)/2 - 74px),
    rgba(var(--shaft),calc(var(--shaft-a) * .55)) calc(50% + var(--col)/2 + 40px),
    rgba(var(--shaft),var(--shaft-edge)) min(100%, calc(50% + var(--col)/2 + var(--feather))),
    rgba(var(--shaft),var(--shaft-edge)) 100%);
}
section.blk{padding:clamp(52px,6vw,96px) 0;position:relative;background:none}
section.blk.shafted,
div.pagewrap.shafted,
div.wrap.shafted,
footer.shafted{background:var(--shaft-bg)}

/* the panels are gone: the wrap is just a measure now */
section.blk>.wrap{background:none!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-radius:0!important;padding:0 28px!important;max-width:1240px}
section.blk>.wrap::before{display:none!important}

/* where one lit stretch meets the next, a hairline with a lit pip */
.seam{position:relative;height:0;pointer-events:none;z-index:2}
.seam::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(var(--col),calc(100% - 56px));height:1px;
  background:linear-gradient(90deg,transparent,var(--rule) 18%,var(--rule) 82%,transparent)}
.seam::after{content:"";position:absolute;left:50%;top:-2.5px;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:rgb(var(--glow-m));
  box-shadow:0 0 10px rgba(var(--glow-m),.9),0 0 22px rgba(var(--glow-v),.6)}

/* ---------------------------------------------------------------------------
   3. INK AND RULE — the palette the shaft demands
   ------------------------------------------------------------------------- */
:root{
  --ink:#140C24; --ink-2:#4C4368; --ink-mut:#767089;
  --rule:rgba(20,12,36,.14);
  --rule-2:rgba(20,12,36,.08);
  --surface:rgba(255,255,255,.62);
  --well:rgba(20,12,36,.045);
  --line:rgba(20,12,36,.13);
  --line-strong:rgba(20,12,36,.24);
  --wash:rgba(124,58,237,.09);
}
:root[data-theme="dark"]{
  --ink:#F4EFFF; --ink-2:#B9AFD6; --ink-mut:#8C82A8;
  --rule:rgba(255,255,255,.14);
  --rule-2:rgba(255,255,255,.07);
  --surface:rgba(255,255,255,.055);
  --well:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.2);
  --wash:rgba(155,107,255,.16);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F4EFFF; --ink-2:#B9AFD6; --ink-mut:#8C82A8;
    --rule:rgba(255,255,255,.14); --rule-2:rgba(255,255,255,.07);
    --surface:rgba(255,255,255,.055); --well:rgba(255,255,255,.05);
    --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.2);
    --wash:rgba(155,107,255,.16);
  }
}

/* ---------------------------------------------------------------------------
   4. TYPE — the detail that separates a design from a template
   ------------------------------------------------------------------------- */
.hero h1{letter-spacing:-.018em;line-height:.96;font-weight:700}
.blk .shead h2,.band h2,.phead h1,.pdp h1{letter-spacing:-.012em;line-height:1.04}
.blk .shead h2{font-size:clamp(1.9rem,3.6vw,2.75rem)}
.blk .shead p{font-size:15.5px;line-height:1.62;max-width:58ch;color:var(--ink-2);
  margin-left:auto;margin-right:auto}

/* the microlabel gets a rule, which is what makes it read as considered */
.eyebrow{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2)}
.eyebrow::before{content:"";width:22px;height:1px;background:rgb(var(--glow-m));flex:none;
  box-shadow:0 0 8px rgba(var(--glow-m),.8)}
/* the base sheet sets .blk .shead .eyebrow{display:block}, which outranks the
   bare .eyebrow rule above, so the rule detail has to be restated here */
.blk .shead .eyebrow,.phead .eyebrow,.band .eyebrow{display:inline-flex}
.blk .shead .eyebrow{margin-bottom:18px}
.fcol h4,.fg h5,.subhd{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--ink-2)}

.orn .line,.orn .line.r{background:linear-gradient(90deg,transparent,var(--rule))}
.orn .line.r{background:linear-gradient(90deg,var(--rule),transparent)}
.orn .txt{color:var(--ink-2);letter-spacing:.3em}
.orn .dia{color:rgb(var(--glow-m))}

/* ---------------------------------------------------------------------------
   5. SURFACES — hairlines, not boxes. Nothing floats unless it is being touched.
   ------------------------------------------------------------------------- */
.cell,.pcard,.tier,.mspot,.vchip,.formcard,.summary,.coll,.notice,.plan{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:transform .22s cubic-bezier(.16,1,.3,1),
             border-color .22s ease, box-shadow .22s ease, background .22s ease}
.cell:hover,.pcard:hover,.tier:hover,.mspot:hover,.vchip:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--glow-v),.55);
  background:color-mix(in srgb, var(--surface) 60%, rgba(var(--glow-v),.05));
  box-shadow:0 1px 0 rgba(var(--glow-v),.3) inset,
             0 14px 34px -18px rgba(var(--glow-v),.7)}
.cell::after{display:none}
.cell{border-radius:12px}
.pcard{border-radius:12px}
.pcard .im{background:var(--well);border-bottom:1px solid var(--rule-2)}
.pcard .fl,.pcard .srctag{background:rgba(255,255,255,.86);border:1px solid var(--rule);
  color:#3A3352;backdrop-filter:none}
:root[data-theme="dark"] .pcard .fl,
:root[data-theme="dark"] .pcard .srctag{background:rgba(16,10,30,.82);color:var(--ink-2)}
.divh,.stabs,.spec-list,.pdesc,.rt .rt-kvs{border-color:var(--rule)}
.rt .rt-kv{border-bottom-color:var(--rule-2)}
.frail{background:none;border:0;border-right:1px solid var(--rule);border-radius:0;
  padding:0 26px 0 0}
@media(max-width:820px){.frail{border-right:0;border-bottom:1px solid var(--rule);padding:0 0 22px}}
.fg{border-bottom-color:var(--rule)}
.summary{border-radius:12px}

/* the vendor cards are artwork; give them a frame worth the art */
.vc{border-radius:12px;box-shadow:0 18px 40px -22px rgba(4,2,14,.9)}
.vc::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.vc:hover{transform:translateY(-5px)}
.vc:hover::after{box-shadow:inset 0 0 0 1px rgba(var(--glow-m),.85),
  inset 0 0 60px 8px rgba(6,3,16,.3)}

/* ---------------------------------------------------------------------------
   6. THE OPEN MOMENTS — hero, band and page heads, where the cave breaks through
   ------------------------------------------------------------------------- */
.hero{background:none}
.hero .hbg::after{background:
  linear-gradient(180deg, rgba(6,3,16,.42) 0, rgba(6,3,16,.06) 26%, rgba(6,3,16,.10) 58%, rgba(6,3,16,.52) 100%)}
.hero::after{box-shadow:inset 0 0 220px 60px rgba(4,2,12,.6)}
.hero .tunnel{opacity:.4}
.heroin::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(880px,94%);height:min(500px,84%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(8,4,20,.66), rgba(8,4,20,.26) 55%, transparent 78%)}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.8),0 0 100px rgba(var(--glow-v),.55)}
.hero .sub,.hero .herocap{text-shadow:0 1px 16px rgba(0,0,0,.85)}
.hero .hstats{background:rgba(10,5,24,.42);border-color:rgba(255,255,255,.15);
  border-radius:14px;box-shadow:0 20px 60px -30px rgba(0,0,0,.9)}

.band{background:linear-gradient(180deg,
  rgba(8,4,22,.62) 0, rgba(8,4,22,.30) 34%, rgba(8,4,22,.68) 100%)}
.band .aur{opacity:.5}
.band h2,.band .eyebrow{text-shadow:0 2px 22px rgba(0,0,0,.8)}
.band p,.band .feat{text-shadow:0 1px 14px rgba(0,0,0,.75)}
.band .eyebrow{color:#E4D2FF}
.plan{background:rgba(255,255,255,.94);border:0;border-radius:14px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
:root[data-theme="dark"] .plan{background:rgba(22,14,40,.92)}

.phead{background:linear-gradient(180deg,
  rgba(6,3,18,.56) 0, rgba(6,3,18,.20) 46%, rgba(6,3,18,.58) 100%)}
.phead .aur{opacity:.5}
.phead::after{box-shadow:inset 0 0 160px 40px rgba(4,2,12,.5)}
.phead h1{text-shadow:0 2px 26px rgba(0,0,0,.85)}
.phead p,.phead .eyebrow{text-shadow:0 1px 14px rgba(0,0,0,.9)}
.phead .eyebrow{color:#E4D2FF}
.phead .eyebrow::before{background:#FF9BEA}

/* The drawn arches are gone. A transition between the lit passage and the open
   cave is not a shape you stamp on top, it is the light running out: the shaft
   itself fades down into the dark, in the same column, so the two are the same
   space rather than two panels butted together. */
.cmouth{display:none}
header.top::after{display:none}   /* the icicle fringe was the tackiest thing here */

.band,.phead,.hero,.sec-hero,.vstore-hero{position:relative}
.band::before,.band::after,
.phead::before,.phead::after,
.hero::before{
  content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;
  height:clamp(90px,11vw,170px);
  background:var(--shaft-bg)}
.band::before,.phead::before{top:0;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.45) 42%,transparent);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.45) 42%,transparent)}
.band::after,.phead::after,.hero::before{bottom:0;
  -webkit-mask-image:linear-gradient(0deg,#000,rgba(0,0,0,.45) 42%,transparent);
  mask-image:linear-gradient(0deg,#000,rgba(0,0,0,.45) 42%,transparent)}
/* the page head opens straight under the header, so it has no light above it */
.phead::before{display:none}
/* the band and the footer are both lit at that joint, so the fade is enough */
.band .wrap,.phead .wrap,.hero .wrap{position:relative;z-index:2}

/* ---------------------------------------------------------------------------
   7. CHROME — header, footer, controls
   ------------------------------------------------------------------------- */
.abar{background:rgba(5,2,14,.88);color:#D6C8F5}
.quicknav{background:rgba(var(--shaft),calc(var(--shaft-a) * .9));
  border-bottom:1px solid var(--rule);backdrop-filter:none;-webkit-backdrop-filter:none}
header.top{background:rgba(var(--shaft),calc(var(--shaft-a) * .94));
  border-bottom:1px solid var(--rule);
  -webkit-backdrop-filter:none;backdrop-filter:none}
body.hd-stuck header.top{background:rgba(var(--shaft),var(--shaft-a));
  box-shadow:0 1px 0 var(--rule),0 18px 40px -34px rgba(6,3,18,.9)}
footer{background:rgba(var(--shaft),calc(var(--shaft-a) * .92));
  border-top:1px solid var(--rule);
  -webkit-backdrop-filter:none;backdrop-filter:none}
footer::before{opacity:.5}

.top .search input,.mobnav .msearch input,.input,.textarea,.sel,.sortsel select,
.qv-field select,.dsearch input{
  background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--ink)}
:root[data-theme="dark"] .top .search input,
:root[data-theme="dark"] .input,:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] .sel,:root[data-theme="dark"] .sortsel select,
:root[data-theme="dark"] .qv-field select{background:rgba(255,255,255,.06)}
.top .search .kbd{background:rgba(255,255,255,.75);border-color:var(--line)}
:root[data-theme="dark"] .top .search .kbd{background:rgba(255,255,255,.08)}

.tchip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#F2ECFF}
.hero .tchip:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55)}
.bigsearch input{background:rgba(255,255,255,.97);border:0;
  box-shadow:0 20px 60px -26px rgba(0,0,0,.9),0 0 0 1px rgba(var(--glow-v),.28)}
.bigsearch input:focus{box-shadow:0 20px 60px -26px rgba(0,0,0,.9),0 0 0 3px rgba(var(--glow-v),.6)}

.drop{margin-top:calc(-1 * clamp(22px,3vw,42px))}
.drop>.wrap{background:rgba(14,7,30,.82);border:1px solid rgba(var(--glow-m),.4);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.95),0 0 40px -18px rgba(var(--glow-m),.7)}

/* overlays keep their blur on desktop, where it is affordable */
.wf{background:rgba(var(--shaft),.985);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.qv{background:rgba(var(--shaft),.99);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.descent{background:rgba(var(--shaft),.88);border-color:var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---------------------------------------------------------------------------
   8. MOBILE — this is where it was sticking. Nothing here may blur, filter or
   composite per frame. The shaft covers the column, the plate is the small one,
   and every decorative layer is switched off.
   ------------------------------------------------------------------------- */
@media(max-width:860px){
  :root{--col:100vw;--feather:0px;--shaft-a:.965}
  :root[data-theme="dark"]{--shaft-a:.86}
  section.blk>.wrap{padding:0 18px!important}
  section.blk{padding:38px 0}
  .hero .tunnel,.motes,.lamp,.cave-vig,.cave-grain{display:none!important}
  .cmouth{display:none}
  *,*::before,*::after{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .wf,.qv,.descent,header.top,.quicknav,footer{
    background:rgba(var(--shaft),.99)!important}
  .qv-foot{background:rgba(var(--shaft),1)!important}
  .cavern .lyr{transition:opacity 520ms linear}
  /* keep the browser from laying out and painting what is far off screen */
  section.blk,.band,footer{content-visibility:auto;contain-intrinsic-size:auto 700px}
}
@media (prefers-reduced-motion:reduce){
  .cavern .lyr{transition:none}
}