/* ============================================================
   Ways of Healing — concept pages: Museum Vitrine glass skin
   Override layer loaded AFTER case-study.css on concept_*.html.
   The parchment field-notebook world stays; concept content sits
   under museum display-case glass. Pairs with concept-vitrine.js
   (tap-the-glass ripple).
   ============================================================ */

/* colour washes behind the case so the glass clearly refracts something */
body{position:relative}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(420px 320px at 18% 22%, rgba(192,138,45,.30), transparent 70%),
    radial-gradient(520px 380px at 84% 30%, rgba(92,102,71,.26), transparent 70%),
    radial-gradient(460px 360px at 60% 88%, rgba(155,48,38,.16), transparent 70%),
    radial-gradient(200px 160px at 38% 52%, rgba(39,75,99,.18), transparent 70%),
    radial-gradient(240px 200px at 72% 64%, rgba(192,138,45,.20), transparent 70%);
}

/* ── the sheet becomes a glass display case ── */
body .sheet{
  background:linear-gradient(132deg,
    rgba(255,255,255,.52) 0%,
    rgba(255,255,255,.20) 38%,
    rgba(255,255,255,.13) 62%,
    rgba(255,255,255,.38) 100%);
  background-image:none;
  -webkit-backdrop-filter:blur(10px) saturate(1.18);
  backdrop-filter:blur(10px) saturate(1.18);
  border:1px solid rgba(166,136,76,.55);
  border-radius:8px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 2px 0 0 rgba(255,255,255,.4),
    inset 0 0 34px rgba(255,255,255,.22),
    inset -1px -2px 0 rgba(120,95,50,.22),
    0 18px 40px rgba(60,45,20,.26);
  overflow:hidden;
}
/* double specular sheen sweeping across the glass */
body .sheet::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(115deg,
      transparent 26%, rgba(255,255,255,.30) 38%,
      rgba(255,255,255,.08) 46%, transparent 56%),
    linear-gradient(115deg,
      transparent 62%, rgba(255,255,255,.14) 70%,
      transparent 78%);
}
/* brass top rail of the case */
body .sheet::after{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;pointer-events:none;
  background:linear-gradient(90deg,#8a6d3e,#c9a85f 30%,#a07f45 55%,#d6b76e 80%,#8a6d3e);
  box-shadow:0 1px 0 rgba(255,255,255,.5);
}
body .sheet>*{position:relative;z-index:1}

/* ── inner panels = smaller glass shelves inside the case ──
   no backdrop-filter here: they sit on the already-blurred sheet,
   so stacked blur was invisible but caused smearing on fast
   scroll (same lesson as explore.html's acrylic sleeves) —
   slightly more opaque gradients stand in for it */
body .glance,
body .cpoint,
body .ccase,
body .pager a{
  background:linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.38) 60%, rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.8);
  outline:1px solid rgba(166,136,76,.30);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 0 14px rgba(255,255,255,.25),
    0 4px 12px rgba(60,45,20,.13);
  border-radius:6px;
}
body .glance{border-left:4px solid rgba(192,138,45,.75)}
body .cpoint{border-left:3px solid rgba(192,138,45,.75)}
body .ccase{transition:.16s}
body .ccase:hover,body .ccase.taphover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.9);
  outline-color:rgba(155,48,38,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(60,45,20,.18);
}

/* quote = etched glass plaque */
body .quote{
  background:linear-gradient(150deg, rgba(255,255,255,.56), rgba(255,255,255,.34) 60%, rgba(255,255,255,.46));
  border:1px solid rgba(255,255,255,.8);
  border-radius:6px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 14px rgba(255,255,255,.22);
}
body .quote::before,body .quote::after{border-color:rgba(160,127,69,.8)}

/* pager hover: glass lifts, no paper offset shadow */
body .pager a:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 16px rgba(60,45,20,.16);
}

/* the red stamp reads as a paper label taped inside the case — keep, soften */
body .stamp{background:rgba(251,246,231,.72)}

/* etched museum note in the glass, bottom of the case */
body .pagenum{
  font-family:'Crimson Text',serif;font-size:1.05rem;letter-spacing:.5px;
  color:rgba(106,86,58,.55);text-transform:none;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
body .pagenum::after{
  content:'a living exhibit — tapping the glass encouraged';
  display:block;font-family:'Special Elite',monospace;font-size:.52rem;
  letter-spacing:2px;text-transform:uppercase;color:rgba(145,122,85,.5);margin-top:4px;
}

/* ── tap anywhere: a quiet glass ripple rings out from your finger ──
   fixed-position on body, so it works across the whole page and
   sidesteps the `body .sheet>*` position:relative override */
body>span.glass-ripple{
  position:fixed;display:block;pointer-events:none;z-index:80;
  border-radius:50%;transform:translate(-50%,-50%);
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:
    0 0 0 1px rgba(120,95,50,.18),
    0 0 10px rgba(255,255,255,.5),
    inset 0 0 8px rgba(255,255,255,.35);
  animation:glassRipple .7s ease-out forwards;
}
body>span.glass-ripple.r2{animation-duration:1s;animation-delay:.12s;opacity:0;border-width:1px}
@keyframes glassRipple{
  0%{width:0;height:0;opacity:.9}
  100%{width:130px;height:130px;opacity:0}
}
@media (prefers-reduced-motion:reduce){body>span.glass-ripple{display:none}}

/* ── narrow screens: same glass, lighter blur (phone GPUs) ── */
@media (max-width:760px){
  body .sheet{
    -webkit-backdrop-filter:blur(7px) saturate(1.15);
    backdrop-filter:blur(7px) saturate(1.15);
  }
}