/* Glass — a satin-etched slab of low-iron glass (glass.js): slightly rounded, frameless; the arris is the only line.
   Layers, back to front: the refracting arris band (sees the bare wall), the etched face (frost), the sun's glow,
   a sub-visible dither, the quiet ambient arris, and the sunlit arris (glint, fringe, caustic) drawn by glass.js. */
.gl-layers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gl-layers > * { position: absolute; inset: 0; border-radius: var(--gl-radius, 12px); }

/* The arris band: refracted by an SVG filter glass.js sets on it (Chromium; the map is neutral inside the band, so the
   rest of it is simply the wall under the frost). Elsewhere there is no band: the frost runs to the edge. */
.gl-flat .gl-bevel { display: none; }

/* The etched face: it diffuses, it does not whiten — the stone and the light's edges stay legible through it. */
.gl-frost {
  background: linear-gradient(rgb(250 250 248 / .08), rgb(250 250 248 / .045));   /* the satin face, lit from above */
  -webkit-backdrop-filter: blur(var(--gl-frost, 9px)); backdrop-filter: blur(var(--gl-frost, 9px));
  -webkit-mask-image: var(--gl-grade, none); mask-image: var(--gl-grade, none);
}
.gl-clear { background: rgb(250 250 248 / .03); -webkit-backdrop-filter: blur(var(--gl-clear-blur, 2px)); backdrop-filter: blur(var(--gl-clear-blur, 2px)); }
/* Where the arris refracts, the etch thins out to it across the band — no inner line, no frame. */
.gl-layers {
  --fx: linear-gradient(to right, transparent, #000 var(--gl-bevel, 8px), #000 calc(100% - var(--gl-bevel, 8px)), transparent);
  --fy: linear-gradient(to bottom, transparent, #000 var(--gl-bevel, 8px), #000 calc(100% - var(--gl-bevel, 8px)), transparent); }
.gl-layers:not(.gl-flat) .gl-frost {
  -webkit-mask-image: var(--fx), var(--fy), var(--gl-grade, linear-gradient(#000 0 0)); -webkit-mask-composite: source-in, source-in;
  mask-image: var(--fx), var(--fy), var(--gl-grade, linear-gradient(#000 0 0)); mask-composite: intersect; }
.gl-layers:not(.gl-flat) .gl-clear {
  -webkit-mask-image: var(--fx), var(--fy); -webkit-mask-composite: source-in; mask-image: var(--fx), var(--fy); mask-composite: intersect; }

/* A figured slab (glass.js `figure`): the frost is masked by the etch field (fully etched → polished), stretched to the
   slab; the dither belongs to the etch, so it thins with it. The caustic canvas lies on the wall behind every other layer
   (glass.js sizes and moves it), so the glass is seen over it. */
.gl-figured .gl-frost { -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  background: linear-gradient(rgb(250 250 248 / .2), rgb(250 250 248 / .13)); }   /* etched glass back-scatters: milkier than polished */
.gl-figured .gl-grain { -webkit-mask: var(--gl-figure) 0 0 / 100% 100% no-repeat; mask: var(--gl-figure) 0 0 / 100% 100% no-repeat; }
.gl-layers > .gl-caustics { inset: auto; border-radius: 0; }

/* The sun's glow in the etch: a coarse field (one px per cell), upsampled smooth by the browser. */
.gl-glow { width: 100%; height: 100%; }

/* Satin etch: a dither so fine it reads as smoothness, not grain. */
.gl-grain { opacity: .45;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* The arris in shade: lit softly from above by the hall (top a hair lighter), a quiet line elsewhere. No frame. */
.gl-arris { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 1px 0 0 rgb(255 255 255 / .07), inset -1px 0 0 rgb(24 28 34 / .07), inset 0 -1px 0 rgb(24 28 34 / .09); }

/* The sunlit arris, fringe and caustic: one canvas overhanging the slab (the caustic lands on the wall beyond it). */
.gl-light { inset: calc(-1 * var(--gl-pad, 24px)); width: calc(100% + 2 * var(--gl-pad, 24px)); height: calc(100% + 2 * var(--gl-pad, 24px)); border-radius: 0; }

@media (prefers-reduced-transparency: reduce) { .gl-frost { background: rgb(238 239 236 / .88); } }