/* THE STORE (livingstorystore.com, 2026-11-08) — the page's own look, over the house's shared/site.css. The material is LIFTED GLASS, from the app's own
   ui/liftedGlass.ts (~/landfall2/src/components/LANCEGame/ui/liftedGlass.ts), as the designer's brief §4 gives it. The house Inter only (the shared
   mono is being retired). Everything that moves stops under prefers-reduced-motion. */

/* the material */
.lift-glass{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);box-shadow:0 22px 48px rgba(16,24,40,.12),0 4px 12px rgba(16,24,40,.05),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
.lift{background-color:var(--c);background-image:linear-gradient(180deg,color-mix(in srgb,var(--c) 80%,#fff) 0%,var(--c) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.12),0 8px 18px color-mix(in srgb,var(--c) 32%,transparent),0 2px 4px color-mix(in srgb,var(--c) 22%,transparent);border:1px solid rgba(255,255,255,.25);transition:transform .12s ease,box-shadow .12s ease}
.lift:active{transform:translateY(1px)}
.st-start{color:#fff}
.st-start:hover{transform:translateY(-1px)}

/* the ground under the shelf and the light sections */
.st-ground{background:radial-gradient(700px 420px at 10% -10%,#E7F6F1 0%,rgba(231,246,241,0) 60%),radial-gradient(640px 420px at 100% 0%,#EAF0FF 0%,rgba(234,240,255,0) 58%),radial-gradient(680px 460px at 70% 110%,#FFF3E2 0%,rgba(255,243,226,0) 60%),#fff}
.st .sand{background:linear-gradient(180deg,#F5F5F7,#F8F7F4)}

/* ── THE SHELF ── */
#shelf{padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(36px,5vw,64px)}
#shelf+#seat{padding-top:clamp(36px,5vw,64px)}
.st-shelf{border-radius:32px;padding:clamp(18px,3vw,34px) clamp(14px,2.4vw,30px) clamp(22px,3vw,34px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.6vw,22px);position:relative}
.st-shelf::after{content:"";position:absolute;left:4%;right:4%;bottom:18px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(16,24,40,.10),rgba(16,24,40,0));pointer-events:none}
.st-item{display:grid;justify-items:center;align-content:start;gap:4px;text-decoration:none;color:var(--ink);border-radius:22px;padding:10px 6px 14px;position:relative;transition:background .25s ease}
.st-item:hover,.st-item:focus-visible{background:rgba(255,255,255,.55)}
.st-item:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.st-item b{font:700 17px/1.2 var(--sans);letter-spacing:-.01em;margin-top:6px;text-align:center}
.st-price{font:500 14.5px/1.3 var(--sans);color:var(--soft)}
.st-anchor{position:relative;display:block;width:100%;aspect-ratio:4/5;touch-action:pan-y}
/* the poster: the product's painting, lifted, standing where the object will stand */
.st-anchor>img{position:absolute;left:8%;right:8%;top:14%;width:84%;height:64%;object-fit:cover;border-radius:18px;box-shadow:0 18px 34px -16px rgba(16,24,40,.45),0 0 0 1px rgba(255,255,255,.8);transition:opacity .9s ease}
.st-anchor.lit>img{opacity:0}
.st-anchor.st-painted>img{transform:perspective(700px) rotateX(6deg);top:12%}
.st-plinth{display:block;width:62%;height:18px;margin-top:-22px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#fff 0%,#f1efe9 55%,#e2ded3 100%);box-shadow:0 10px 18px -8px rgba(16,24,40,.35),inset 0 1px 0 #fff;position:relative;z-index:0}
.st-hint{text-align:center;font-size:14.5px;margin:14px 0 0}
.st-grab{cursor:grab}.st-grab:active{cursor:grabbing}
canvas.st-3d{position:fixed;left:0;top:0;z-index:30;pointer-events:none;display:block}

/* ── THE CARDS ── */
.st-card{border-radius:26px;gap:12px}
.st-card .n{letter-spacing:.12em}
.st-card h3{font-size:clamp(22px,2vw,26px);letter-spacing:-.02em;line-height:1.2}
.st-card-art{border-radius:20px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 14px 30px -18px rgba(16,24,40,.45)}
.st-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.st-amount{margin:0;color:var(--soft);font-size:16px}
.st-amount b{font:800 clamp(34px,3.4vw,46px)/1 var(--sans);letter-spacing:-.04em;color:var(--c,var(--ink));margin-right:6px}
.st .st-card .st-sub{font:700 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:8px 0 0}
.st-gets{--dot:var(--c);gap:8px}
.st-gets li{font-size:16px}
.st-blue{margin:6px 0 2px;font-size:25px}
.st-card .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.st-big{grid-template-columns:1fr 1.1fr;align-items:start;gap:clamp(20px,3vw,40px);padding:clamp(18px,2.6vw,32px)}
.st-big .st-card-art{aspect-ratio:4/5;position:sticky;top:140px}
.st-card-in{display:grid;gap:12px;align-content:start}
.st-card-in h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.035em;line-height:1.08}
.st-card-in .lead{font-size:clamp(17px,1.5vw,20px)}
.st-ladder-line a{white-space:nowrap;color:var(--c);font-weight:700;text-decoration:none}
.st-worlds{align-items:stretch}
.st-worlds .st-card .row{margin-top:auto;padding-top:6px}
.st-worlds .st-card{grid-template-rows:auto}
.st-vr{align-items:center}
.st-vr-art{padding:8px;border-radius:26px}
.st-vr-cards{margin-top:28px}
.st-small h3{font-size:21px}
.st-how{max-width:880px;margin:0 auto;padding:clamp(22px,3vw,40px)}
.st-how h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.035em}
.st-small-print{font-size:14.5px;margin:4px 0 0}
#build .st-card-art{padding:8px;border-radius:26px;aspect-ratio:auto}
#build .st-card-art img{border-radius:20px;aspect-ratio:16/9}

/* ── THE LADDER: rungs of lifted glass, a tiny island on each (Landfall's painting, cropped round), lighting one by one ── */
.st-ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:clamp(10px,1.6vw,20px);align-items:end;counter-reset:r}
.st-rung{border-radius:22px;padding:18px 12px 16px;display:grid;justify-items:center;gap:6px;text-align:center;transform:translateY(calc((4 - var(--i)) * 10px));transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,background .5s ease}
.st-rung b{font:800 30px/1 var(--sans);letter-spacing:-.03em;color:var(--mute);transition:color .5s ease}
.st-rung span:last-child{font:600 14.5px/1.2 var(--sans);color:var(--soft)}
.st-isle{width:62px;height:62px;border-radius:50%;background:url(../assets/art/landfall.webp) center/cover;filter:grayscale(1) brightness(1.08) opacity(.55);box-shadow:0 0 0 3px #fff,0 8px 16px -8px rgba(16,24,40,.4);transition:filter .6s ease,box-shadow .6s ease}
.st-rung.on{transform:translateY(calc((4 - var(--i)) * 10px - 6px));box-shadow:0 26px 50px rgba(16,24,40,.14),0 4px 12px rgba(16,24,40,.06),inset 0 1px 0 #fff}
.st-rung.on b{color:var(--ink)}
.st-rung.on .st-isle{filter:none;box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(31,163,163,.35),0 10px 20px -8px rgba(16,24,40,.45)}
.st-rung.half.on{background:rgba(255,248,224,.86)}
.st-rung.half.on span:last-child{color:#7a5300;font-weight:700}
.st-rung.free.on{background:rgba(226,247,239,.9)}
.st-rung.free.on span:last-child{color:#11684f;font-weight:800}

/* ── A PHONE: the shelf a column you scroll; the cards one by one ── */
@media(max-width:900px){
  .st-shelf{grid-template-columns:repeat(3,1fr)}
  .st-big{grid-template-columns:1fr}
  .st-big .st-card-art{aspect-ratio:16/9;position:relative;top:auto}
}
@media(max-width:640px){
  .st-shelf{grid-template-columns:1fr;gap:6px}
  .st-item{grid-template-columns:1fr;padding:6px 4px 16px}
  .st-anchor{aspect-ratio:5/4;max-width:340px}
  .st-ladder{grid-template-columns:1fr;gap:10px}
  .st-rung{grid-template-columns:62px 54px 1fr;justify-items:start;align-items:center;text-align:left;transform:none;padding:12px 16px}
  .st-rung.on{transform:translateX(4px)}
  .st-worlds,.st-vr-cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .st-rung,.st-rung.on{transition:none}
  .st-anchor>img{transition:none}
  .lift,.st-start{transition:none}
}