/* ──────────────────────────────────────────────────────────────
   stone.css — the material system. Travertine page, basalt stones.
   One warm light from the upper left, everywhere.
   ────────────────────────────────────────────────────────────── */

:root {
  /* travertine page */
  --trav-base: #e7e0d1;
  --trav-deep: #d9cfbc;
  --trav-ink: #2b2620;
  --trav-ink-soft: #6a5f50;

  /* basalt stone */
  --basalt-hi: #353028;
  --basalt-mid: #1f1c19;
  --basalt-lo: #16140f;
  --fleck: #d2b27a;
  --label: #ece3d0;
  --label-bright: #fbf5e8;
  --label-inset: #b4a890;

  /* limestone recess */
  --recess: #d6cbb6;
  --recess-lit: #e3d9c4;

  --light-x: 1.5px;
  --light-y: 1.5px;

  --ease-heavy: cubic-bezier(.16, .84, .22, 1);   /* decelerating, no bounce */
  --t-lift: 160ms;
  --t-slide: 700ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --trav-base: #2a2622;
    --trav-deep: #1f1b18;
    --trav-ink: #efe7d6;
    --trav-ink-soft: #b2a692;
    --basalt-hi: #3b352c;
    --basalt-mid: #201d19;
    --basalt-lo: #121009;
    --recess: #1a1714;
    --recess-lit: #231f1a;
    --label: #efe6d3;
    --label-bright: #fff9ec;
    --label-inset: #9c927e;
  }
}
:root[data-theme="dark"] {
  --trav-base: #2a2622;
  --trav-deep: #1f1b18;
  --trav-ink: #efe7d6;
  --trav-ink-soft: #b2a692;
  --basalt-hi: #3b352c;
  --basalt-mid: #201d19;
  --basalt-lo: #121009;
  --recess: #1a1714;
  --recess-lit: #231f1a;
  --label: #efe6d3;
  --label-bright: #fff9ec;
  --label-inset: #9c927e;
}

/* ── page surface: travertine ───────────────────────────────── */
.travertine {
  background-color: var(--trav-base);
  background-image:
    /* fine grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.55'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    /* mottling / mineral clouds */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' stitchTiles='stitch' seed='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='table' tableValues='0.25 1'/><feFuncG type='table' tableValues='0.2 0.92'/><feFuncB type='table' tableValues='0.12 0.78'/><feFuncA type='table' tableValues='0 0.4'/></feComponentTransfer></filter><rect width='100%' height='100%' fill='%238a6f4a' filter='url(%23m)'/></svg>"),
    /* pores: small dark pits */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='p' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='2' stitchTiles='stitch' seed='11'/><feColorMatrix values='0 0 0 0 0.52  0 0 0 0 0.45  0 0 0 0 0.35  9 0 0 0 -7'/></filter><rect width='100%' height='100%' fill='%23857258' filter='url(%23p)'/></svg>");
  background-blend-mode: soft-light, multiply, multiply;
  background-size: 220px 220px, 600px 600px, 340px 340px;
}

/* ── the socket: a shallow recess cut into the travertine ────── */
.socket {
  position: relative;
  display: block;
  border-radius: 13px 16px 12px 15px / 15px 12px 16px 13px;
  background-color: var(--recess);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.5'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-blend-mode: soft-light;
  box-shadow:
    inset 0 3px 7px rgba(60, 45, 25, .38),
    inset 2px 2px 3px rgba(60, 45, 25, .28),
    inset -1px -1px 0 rgba(255, 252, 244, .65),
    0 1px 0 rgba(255, 252, 244, .55);
  transition: background-color var(--t-lift) ease;
}
.mount { position: relative; display: block; }
.mount .socket { position: absolute; inset: 0; z-index: 0; }
.mount .slab, .mount > .stone { position: relative; z-index: 1; }
.mount.is-sliding .slab, .mount.is-sliding > .stone { z-index: 3; }
.is-pressed .socket { background-color: var(--recess-lit); }

/* the one short line that appears in the empty recess */
.socket .where {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: 1.1rem;
  font: 500 0.74rem/1 var(--font-sans, sans-serif);
  letter-spacing: .06em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--trav-ink-soft);
  text-shadow: 0 1px 0 rgba(255, 252, 244, .7);
  opacity: 0;
  transition: opacity 220ms ease 60ms;
  pointer-events: none;
}
.is-sliding .where { opacity: 1; }

/* ── the stone ──────────────────────────────────────────────── */
.stone {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .6em;
  box-sizing: border-box;
  min-height: 64px;
  padding: 0 1.6rem;
  border-radius: 11px 14px 10px 13px / 13px 10px 14px 11px;
  color: var(--label);
  font: 500 1.45rem/1 var(--font-serif, serif);
  letter-spacing: .005em;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .4);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;

  background-color: var(--basalt-mid);
  background-image:
    /* warm mineral flecks: few, irregular */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 0 0.40  9 0 0 0 -6.6'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    /* pale crystal patches */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='3' stitchTiles='stitch' seed='21'/><feColorMatrix values='0 0 0 0 0.60  0 0 0 0 0.55  0 0 0 0 0.47  4 0 0 0 -2.4'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
    /* vesicles: dark irregular pits */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='v' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.13' numOctaves='3' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  15 0 0 0 -10.6'/></filter><rect width='100%' height='100%' filter='url(%23v)'/></svg>"),
    /* crystalline grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch' seed='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.75'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    /* base: lit from upper left */
    linear-gradient(135deg, var(--basalt-hi) 0%, var(--basalt-mid) 45%, var(--basalt-lo) 100%);
  background-blend-mode: screen, soft-light, multiply, overlay, normal;
  background-size: 240px 240px, 300px 300px, 260px 260px, 200px 200px, 100% 100%;

  box-shadow:
    /* carved edge: lit rim upper-left, dark rim lower-right */
    inset var(--light-x) var(--light-y) 1px rgba(255, 238, 210, .22),
    inset 0 0 0 1px rgba(0, 0, 0, .45),
    inset -2px -3px 3px rgba(0, 0, 0, .6),
    inset 4px 4px 5px -3px rgba(255, 238, 210, .12),
    /* slab thickness, then it sits above the recess */
    0 2px 0 rgba(12, 10, 7, .95),
    1px 3px 0 rgba(12, 10, 7, .55),
    3px 6px 10px -4px rgba(30, 20, 10, .55),
    6px 12px 18px -10px rgba(30, 20, 10, .5);

  transform: translate3d(0, 0, 0);
  transition:
    transform var(--t-lift) var(--ease-heavy),
    box-shadow var(--t-lift) var(--ease-heavy),
    color var(--t-lift) ease;
  will-change: transform;
}

.stone .arrow {
  font-family: var(--font-sans, sans-serif);
  font-weight: 400;
  font-size: .9em;
  margin-left: .35em;
  transform: translateY(-.04em);
}

/* RAISED → lifted (hover / focus) */
.stone:hover,
.stone:focus-visible,
.stone.is-lifted {
  color: var(--label-bright);
  transform: translate3d(0, -3px, 0);
  box-shadow:
    inset var(--light-x) var(--light-y) 1px rgba(255, 238, 210, .28),
    inset 0 0 0 1px rgba(0, 0, 0, .45),
    inset -2px -3px 3px rgba(0, 0, 0, .6),
    inset 4px 4px 5px -3px rgba(255, 238, 210, .14),
    0 2px 0 rgba(12, 10, 7, .95),
    1px 3px 0 rgba(12, 10, 7, .55),
    5px 10px 14px -4px rgba(30, 20, 10, .5),
    10px 20px 28px -10px rgba(30, 20, 10, .45);
}

.stone:focus-visible {
  outline: 2px solid var(--trav-ink);
  outline-offset: 5px;
}

/* PRESSED: sunk into the recess, label inset */
.stone:active,
.stone.is-pressed {
  color: var(--label-inset);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 238, 210, .16);
  transform: translate3d(0, 2px, 0) scale(.985);
  transition-duration: 70ms;
  box-shadow:
    inset var(--light-x) var(--light-y) 1px rgba(255, 238, 210, .08),
    inset 0 0 0 1px rgba(0, 0, 0, .6),
    inset 0 4px 6px rgba(0, 0, 0, .55),
    inset -1px -1px 2px rgba(0, 0, 0, .3),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0);
}

/* SLIDING: released; the stone leaves its recess on a heavy curve */
.stone.is-sliding {
  color: var(--label-bright);
  transform: translate3d(var(--slide-x, 112%), -2px, 0);
  opacity: 0;
  transition:
    transform var(--t-slide) var(--ease-heavy),
    box-shadow var(--t-slide) var(--ease-heavy),
    opacity 220ms ease calc(var(--t-slide) - 200ms);
  box-shadow:
    inset var(--light-x) var(--light-y) 1px rgba(255, 238, 210, .26),
    inset 0 0 0 1px rgba(0, 0, 0, .45),
    inset -2px -3px 3px rgba(0, 0, 0, .6),
    inset 4px 4px 5px -3px rgba(255, 238, 210, .14),
    0 2px 0 rgba(12, 10, 7, .95),
    1px 3px 0 rgba(12, 10, 7, .55),
    5px 10px 14px -4px rgba(30, 20, 10, .5),
    10px 20px 28px -10px rgba(30, 20, 10, .45);
}

@media (prefers-reduced-motion: reduce) {
  .stone, .socket, .socket .where { transition: none !important; }
  .stone.is-sliding { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* ── press style B: the face itself turns to limestone (ref-3 literal) ── */
[data-press="lime"] .stone:active,
[data-press="lime"] .stone.is-pressed {
  --x: 0;
  color: #3d3326;
  text-shadow: 0 1px 0 rgba(255, 252, 244, .75), 0 -1px 0 rgba(60, 45, 25, .25);
  background-color: #d9cfb8;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='p' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='2' stitchTiles='stitch' seed='11'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.35  0 0 0 0 0.27  9 0 0 0 -7'/></filter><rect width='100%' height='100%' fill='%236b5a44' filter='url(%23p)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.6'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    linear-gradient(135deg, #cdc2aa 0%, #dbd1ba 50%, #e4dbc6 100%);
  background-blend-mode: multiply, soft-light, normal;
  background-size: 340px 340px, 220px 220px, 100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(60, 45, 25, .35),
    inset 0 4px 6px rgba(60, 45, 25, .4),
    inset 2px 2px 3px rgba(60, 45, 25, .25),
    inset -1px -1px 0 rgba(255, 252, 244, .7),
    0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
}

/* ── accent recess: a polished inlay hidden under a stone, seen on slide ── */
[data-accent="sapphire"] .socket {
  --recess: #10306c;
  --recess-lit: #163d85;
  background-color: var(--recess);
  background-image:
    /* polished gloss, lit upper left */
    linear-gradient(135deg, rgba(160, 196, 255, .45) 0%, rgba(90, 140, 230, .12) 28%, rgba(0, 0, 0, 0) 55%, rgba(0, 10, 40, .35) 100%),
    /* mineral grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.45'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    /* deep color veins */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='4' stitchTiles='stitch' seed='13'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.12  0 0 0 0 0.38  0 0 0 1.4 -0.3'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  background-blend-mode: normal, soft-light, multiply;
  background-size: 100% 100%, 220px 220px, 400px 400px;
  box-shadow:
    inset 0 3px 8px rgba(0, 6, 28, .65),
    inset 2px 2px 3px rgba(0, 6, 28, .5),
    inset -1px -1px 0 rgba(170, 200, 255, .35),
    0 1px 0 rgba(255, 252, 244, .55);
}
[data-accent="sapphire"] .where {
  color: #dbe7ff;
  text-shadow: 0 1px 1px rgba(0, 6, 28, .8);
}

/* amethyst: purple built from fractals of randomized color, like a raw mined gem */
[data-accent="amethyst"] .socket {
  --recess: #1d0b3a;
  --recess-lit: #26104a;
  background-color: var(--recess);
  background-image:
    linear-gradient(135deg, rgba(215, 190, 245, .22) 0%, rgba(160, 120, 230, .06) 26%, rgba(0, 0, 0, 0) 52%, rgba(10, 0, 30, .55) 100%),
    /* facets: sharp fractal veins in random hues, pushed purple */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='0.035' numOctaves='5' stitchTiles='stitch' seed='17'/><feColorMatrix values='0.7 0 0.3 0 0  0 0.35 0.15 0 0  0.3 0.1 0.9 0 0.05  0 0 0 0 0.6'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    /* color clouds: wide random hue drift, flashes of teal and rose */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch' seed='29'/><feColorMatrix values='1.0 0 0 0 -0.15  0 0.7 0.2 0 -0.15  0.15 0 1.0 0 -0.05  0 0 0 0 0.5'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  background-blend-mode: normal, soft-light, soft-light;
  background-size: 100% 100%, 360px 360px, 500px 500px;
  box-shadow:
    inset 0 3px 8px rgba(15, 0, 40, .7),
    inset 2px 2px 3px rgba(15, 0, 40, .5),
    inset -1px -1px 0 rgba(230, 210, 255, .4),
    0 1px 0 rgba(255, 252, 244, .55);
}
[data-accent="amethyst"] .where { color: #f1e6ff; text-shadow: 0 1px 1px rgba(15, 0, 40, .85); }

/* platinum: pale brushed metal, cool and quiet */
[data-accent="platinum"] .socket {
  --recess: #cdd1d5;
  --recess-lit: #d8dcdf;
  background-color: var(--recess);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(60, 68, 76, .22) 100%),
    /* brushed hairlines */
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .10) 0 1px, rgba(0, 0, 0, 0) 1px 2px),
    /* metal bands */
    linear-gradient(172deg, #eceef0 0%, #c6cbd0 32%, #e3e6e9 54%, #b4bac0 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.35'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-blend-mode: normal, normal, normal, soft-light;
  background-size: 100% 100%, 100% 100%, 100% 100%, 220px 220px;
  box-shadow:
    inset 0 3px 7px rgba(40, 46, 52, .45),
    inset 2px 2px 3px rgba(40, 46, 52, .3),
    inset -1px -1px 0 rgba(255, 255, 255, .85),
    0 1px 0 rgba(255, 252, 244, .55);
}
[data-accent="platinum"] .where { color: #2f353b; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }

/* opal: milky pale stone with fractal flashes of every color */
[data-accent="opal"] .socket {
  --recess: #d9d4cf;
  --recess-lit: #e4dfda;
  background-color: var(--recess);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .1) 30%, rgba(0, 0, 0, 0) 55%, rgba(70, 60, 80, .22) 100%),
    /* color flashes: raw turbulence, channels independent, so hues are random */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='o' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='0.03' numOctaves='4' stitchTiles='stitch' seed='31'/><feColorMatrix values='1.6 0 0 0 -0.2  0 1.6 0 0 -0.2  0 0 1.6 0 -0.2  0 0 0 0 0.7'/></filter><rect width='100%' height='100%' filter='url(%23o)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.3'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-blend-mode: normal, soft-light, soft-light;
  background-size: 100% 100%, 420px 420px, 220px 220px;
  box-shadow:
    inset 0 3px 7px rgba(50, 40, 60, .4),
    inset 2px 2px 3px rgba(50, 40, 60, .28),
    inset -1px -1px 0 rgba(255, 255, 255, .85),
    0 1px 0 rgba(255, 252, 244, .55);
}
[data-accent="opal"] .where { color: #3b3340; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }

/* gold: a warm brushed vein under the largest stone */
[data-accent="gold"] .socket {
  --recess: #a8853f;
  --recess-lit: #b8934a;
  background-color: var(--recess);
  background-image:
    linear-gradient(135deg, rgba(255, 240, 200, .6) 0%, rgba(255, 235, 190, .12) 28%, rgba(0, 0, 0, 0) 52%, rgba(70, 45, 10, .35) 100%),
    repeating-linear-gradient(100deg, rgba(255, 245, 210, .12) 0 1px, rgba(0, 0, 0, 0) 1px 2px),
    linear-gradient(172deg, #d9b968 0%, #a8853f 36%, #cfae5c 58%, #8f6d2e 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.35'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-blend-mode: normal, normal, normal, soft-light;
  background-size: 100% 100%, 100% 100%, 100% 100%, 220px 220px;
  box-shadow:
    inset 0 3px 7px rgba(70, 45, 10, .5),
    inset 2px 2px 3px rgba(70, 45, 10, .35),
    inset -1px -1px 0 rgba(255, 245, 210, .7),
    0 1px 0 rgba(255, 252, 244, .55);
}
[data-accent="gold"] .where { color: #3d2c0c; text-shadow: 0 1px 0 rgba(255, 245, 210, .6); }

/* ══════════════════════════════════════════════════════════════
   CUT: chipped slab. The stone becomes three layers:
   .slab (shadow + motion) › .slab::before (side face) › .stone (top face)
   Each slab carries its own polygon so no two silhouettes match.
   ══════════════════════════════════════════════════════════════ */
[data-cut="chipped"] .slab {
  position: relative;
  display: block;
  filter:
    drop-shadow(0 1px 1px rgba(20, 14, 8, .45))
    drop-shadow(4px 7px 6px rgba(30, 20, 10, .42))
    drop-shadow(8px 14px 14px rgba(30, 20, 10, .24));
  transition: transform var(--t-lift) var(--ease-heavy), filter var(--t-lift) var(--ease-heavy);
  will-change: transform;
}
[data-cut="chipped"] .slab::before {
  /* the side face: rough, a touch lighter and browner than the top, lit on the right chips */
  content: ""; position: absolute; inset: 0;
  transform: translate(1.5px, 3.5px);
  clip-path: var(--cut);
  background-color: #2d2823;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.9'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"),
    linear-gradient(90deg, #26211c, #3a332b 60%, #4a4138);
  background-blend-mode: overlay, normal;
  background-size: 120px 120px, 100% 100%;
}
[data-cut="chipped"] .stone {
  clip-path: var(--cut);
  border-radius: 0;
  /* the top face keeps its carved rim, loses the widget shadow (the slab carries it) */
  box-shadow:
    inset 2px 2px 1px rgba(255, 238, 210, .26),
    inset 0 0 0 1px rgba(0, 0, 0, .5),
    inset -3px -3px 3px rgba(0, 0, 0, .65),
    inset 6px 6px 8px -4px rgba(255, 238, 210, .10);
  background-image:
    /* worn lighter zones: big, soft */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='w' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch' seed='41'/><feColorMatrix values='0 0 0 0 0.58  0 0 0 0 0.52  0 0 0 0 0.43  2.4 0 0 0 -1.2'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>"),
    /* mineral flecks */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.64  0 0 0 0 0.52  0 0 0 0 0.36  6 0 0 0 -4.5'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    /* large pits, few */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='v' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.07' numOctaves='3' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  16 0 0 0 -11.8'/></filter><rect width='100%' height='100%' filter='url(%23v)'/></svg>"),
    /* small pits */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='v' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='2' stitchTiles='stitch' seed='19'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  14 0 0 0 -10.4'/></filter><rect width='100%' height='100%' filter='url(%23v)'/></svg>"),
    /* fine grain, quiet */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch' seed='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.35'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    linear-gradient(135deg, var(--basalt-hi) 0%, var(--basalt-mid) 45%, var(--basalt-lo) 100%);
  background-blend-mode: soft-light, screen, multiply, multiply, overlay, normal;
  background-size: 420px 420px, 240px 240px, 320px 320px, 260px 260px, 200px 200px, 100% 100%;
}
/* motion moves to the slab so the side face and shadow travel with the top */
[data-cut="chipped"] .slab:has(.stone:hover),
[data-cut="chipped"] .slab:has(.stone:focus-visible),
[data-cut="chipped"] .slab:has(.stone.is-lifted) {
  transform: translate3d(0, -3px, 0);
  filter:
    drop-shadow(0 2px 1px rgba(20, 14, 8, .4))
    drop-shadow(6px 10px 7px rgba(30, 20, 10, .4))
    drop-shadow(12px 22px 20px rgba(30, 20, 10, .26));
}
[data-cut="chipped"] .slab:has(.stone:active),
[data-cut="chipped"] .slab:has(.stone.is-pressed) {
  transform: translate3d(0, 2px, 0) scale(.985);
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  transition-duration: 70ms;
}
[data-cut="chipped"] .slab:has(.stone.is-sliding) {
  transform: translate3d(var(--slide-x, 112%), -2px, 0);
  opacity: 0;
  transition: transform var(--t-slide) var(--ease-heavy), filter var(--t-slide) var(--ease-heavy), opacity 220ms ease calc(var(--t-slide) - 200ms);
}
[data-cut="chipped"] .socket { clip-path: var(--cut); border-radius: 0; }
[data-cut="chipped"] .socket .where { padding-left: 1.4rem; }
[data-cut="chipped"] .stone,
[data-cut="chipped"] .stone:hover,
[data-cut="chipped"] .stone:focus-visible,
[data-cut="chipped"] .stone.is-lifted,
[data-cut="chipped"] .stone.is-sliding { transform: none; }
[data-cut="chipped"] .stone:active,
[data-cut="chipped"] .stone.is-pressed {
  transform: none;
  box-shadow:
    inset 2px 2px 1px rgba(255, 238, 210, .08),
    inset 0 0 0 1px rgba(0, 0, 0, .6),
    inset 0 5px 7px rgba(0, 0, 0, .6),
    inset -2px -2px 2px rgba(0, 0, 0, .35);
}
[data-cut="chipped"] .stone:focus-visible { outline: none; }
[data-cut="chipped"] .slab:has(.stone:focus-visible) { outline: 2px solid var(--trav-ink); outline-offset: 6px; border-radius: 8px; }
[data-cut="chipped"] .socket { border-radius: 14px 17px 13px 16px / 16px 13px 17px 14px; }

/* five silhouettes; percentages so they scale with the slab */
.mount { --cut: polygon(1.2% 9%, 4% 2%, 11% 0.5%, 30% 1.5%, 52% 0%, 71% 1.2%, 88% 0.4%, 96% 3%, 99.3% 12%, 100% 40%, 99.2% 66%, 100% 86%, 97% 97%, 90% 100%, 72% 98.8%, 50% 100%, 28% 99%, 9% 100%, 2.5% 95%, 0.3% 80%, 0.8% 55%, 0% 28%); }
.mount:nth-child(2n), li:nth-child(2n) > .mount { --cut: polygon(0.5% 14%, 3% 3%, 9% 0%, 24% 1.8%, 41% 0.3%, 60% 1.5%, 79% 0%, 93% 1.2%, 98.6% 6%, 100% 22%, 99.4% 48%, 100% 72%, 98.5% 93%, 94% 100%, 76% 99%, 58% 100%, 36% 98.6%, 17% 100%, 6% 98%, 1.2% 90%, 0% 62%, 0.6% 36%); }
.mount:nth-child(3n), li:nth-child(3n) > .mount { --cut: polygon(0% 20%, 2% 5%, 7% 1%, 19% 0%, 35% 2%, 55% 0.4%, 70% 2%, 84% 0%, 95% 1.5%, 99.5% 9%, 100% 34%, 99% 58%, 100% 80%, 98% 96%, 92% 100%, 80% 99%, 62% 100%, 44% 98.5%, 26% 100%, 12% 99%, 3.5% 97%, 0.5% 84%, 0.8% 50%); }
.mount:nth-child(4n), li:nth-child(4n) > .mount { --cut: polygon(1% 6%, 5% 0.5%, 16% 1.5%, 33% 0%, 48% 1.8%, 66% 0.3%, 82% 1.5%, 94% 0%, 99% 4%, 99.6% 26%, 100% 52%, 99% 76%, 99.8% 92%, 96% 99.5%, 86% 98.5%, 68% 100%, 50% 99%, 31% 100%, 14% 98.5%, 5% 100%, 1.5% 92%, 0% 66%, 0.6% 38%); }
.mount.hero-mount { --cut: polygon(0.8% 12%, 3% 3.5%, 8% 0.6%, 22% 1.4%, 38% 0%, 57% 1.6%, 74% 0.2%, 89% 1.5%, 96.5% 0.4%, 99.4% 8%, 100% 30%, 99.3% 55%, 100% 78%, 98.5% 95%, 93% 100%, 78% 99%, 60% 100%, 42% 98.8%, 24% 100%, 10% 99%, 3% 97.5%, 0.4% 88%, 0% 60%, 0.7% 34%); }

/* ══════════════════════════════════════════════════════════════
   DOORS: limestone. Pale slabs with a dark carved label, for the
   secondary links. The basalt stays for the one primary slab.
   ══════════════════════════════════════════════════════════════ */
.stone.limestone {
  color: #3a3024;
  font-weight: 700;
  letter-spacing: .005em;
  text-shadow: 0 1px 0 rgba(255, 252, 244, .8), 0 -1px 0 rgba(60, 45, 25, .22);
  background-color: #d8cdb6;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='p' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='3' stitchTiles='stitch' seed='11'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.35  0 0 0 0 0.27  9 0 0 0 -6.8'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='w' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='3' stitchTiles='stitch' seed='23'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.47  0 0 0 0 0.35  2.6 0 0 0 -1.2'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.6'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    linear-gradient(135deg, #e6dcc6 0%, #d8cdb6 50%, #c6b89d 100%);
  background-blend-mode: multiply, multiply, soft-light, normal;
  background-size: 340px 340px, 420px 420px, 220px 220px, 100% 100%;
  box-shadow:
    inset 2px 2px 1px rgba(255, 252, 244, .9),
    inset 0 0 0 1px rgba(60, 45, 25, .3),
    inset -3px -3px 3px rgba(60, 45, 25, .35),
    0 1px 1px rgba(0, 0, 0, .25),
    3px 6px 10px -4px rgba(30, 20, 10, .45),
    6px 12px 18px -10px rgba(30, 20, 10, .4);
}
.stone.limestone:hover, .stone.limestone:focus-visible, .stone.limestone.is-lifted { color: #2b2219; }
.stone.limestone:active, .stone.limestone.is-pressed {
  color: #6a5c48;
  text-shadow: 0 1px 0 rgba(255, 252, 244, .6), 0 -1px 0 rgba(60, 45, 25, .35);
  box-shadow:
    inset 2px 2px 1px rgba(255, 252, 244, .3),
    inset 0 0 0 1px rgba(60, 45, 25, .4),
    inset 0 5px 7px rgba(60, 45, 25, .45),
    inset -2px -2px 2px rgba(60, 45, 25, .2);
}
[data-cut="chipped"] .slab:has(.stone.limestone)::before {
  background-color: #b9ad94;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.9'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"),
    linear-gradient(90deg, #a69a80, #bfb39a 60%, #cfc3aa);
}
[data-cut="chipped"] .stone.limestone {
  box-shadow:
    inset 2px 2px 1px rgba(255, 252, 244, .9),
    inset 0 0 0 1px rgba(60, 45, 25, .3),
    inset -3px -3px 3px rgba(60, 45, 25, .35);
}
[data-cut="chipped"] .stone.limestone:active,
[data-cut="chipped"] .stone.limestone.is-pressed {
  box-shadow:
    inset 2px 2px 1px rgba(255, 252, 244, .3),
    inset 0 0 0 1px rgba(60, 45, 25, .4),
    inset 0 5px 7px rgba(60, 45, 25, .45);
}
.stone.limestone .arrow { color: #5a4c3a; }
/* the theme switch and small controls can be round pebbles */
.pebble {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 0; cursor: pointer; font: inherit; color: var(--label);
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background-color: var(--basalt-mid);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch' seed='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.6'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    radial-gradient(circle at 30% 28%, var(--basalt-hi), var(--basalt-mid) 55%, var(--basalt-lo));
  background-blend-mode: overlay, normal;
  box-shadow: inset 1.5px 1.5px 1px rgba(255, 238, 210, .25), inset -2px -2px 3px rgba(0, 0, 0, .6), 0 2px 0 rgba(12, 10, 7, .9), 2px 4px 6px -2px rgba(30, 20, 10, .5);
}
.pebble:active { transform: translateY(2px); box-shadow: inset 0 3px 5px rgba(0,0,0,.6); }
.pebble:focus-visible { outline: 2px solid var(--trav-ink); outline-offset: 4px; }

/* ══════════════════════════════════════════════════════════════
   PHOTO: real stone. Four tiles generated for this site, WebP,
   under the lighting and silhouettes above. html[data-tex="photo"].
   ══════════════════════════════════════════════════════════════ */
[data-tex="photo"] {
  --surface-blend: normal;
  --surface-tint: transparent;
}
/* basalt faces: the tile, then one warm light from the upper left */
[data-tex="photo"] .stone:not(.limestone) { text-shadow: 0 1px 1px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .6); }
[data-tex="photo"] .stone,
[data-tex="photo"][data-cut="chipped"] .stone {
  background-color: #1f1c19;
  background-image:
    linear-gradient(135deg, rgba(255, 240, 215, .12) 0%, rgba(255, 240, 215, 0) 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .42) 100%),
    /* a quiet zone behind the label */
    linear-gradient(90deg, rgba(10, 8, 6, .30) 0%, rgba(10, 8, 6, .18) 40%, rgba(10, 8, 6, 0) 70%),
    linear-gradient(rgba(14, 11, 8, .10), rgba(14, 11, 8, .10)),
    url("/tex/basalt.webp");
  background-blend-mode: normal, normal, normal, normal;
  background-size: 100% 100%, 100% 100%, 100% 100%, 640px 640px;
  background-position: 0 0, 0 0, 0 0, var(--tex-x, 0) var(--tex-y, 0);
}
/* every slab shows a different patch of the quarry */
.mount:nth-child(2n), li:nth-child(2n) > .mount { --tex-x: -210px; --tex-y: -140px; }
.mount:nth-child(3n), li:nth-child(3n) > .mount { --tex-x: -420px; --tex-y: -60px; }
.mount:nth-child(4n), li:nth-child(4n) > .mount { --tex-x: -90px; --tex-y: -330px; }
.mount.hero-mount { --tex-x: -40px; --tex-y: -200px; }

[data-tex="photo"] .stone.limestone,
[data-tex="photo"][data-cut="chipped"] .stone.limestone {
  background-color: #d6ccb6;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 245, .35) 0%, rgba(255, 255, 245, 0) 40%, rgba(0, 0, 0, 0) 55%, rgba(60, 45, 25, .22) 100%),
    url("/tex/limestone.webp");
  background-blend-mode: normal, normal;
  background-size: 100% 100%, 640px 640px;
  background-position: 0 0, var(--tex-x, 0) var(--tex-y, 0);
}

/* the broken side face */
[data-tex="photo"][data-cut="chipped"] .slab::before {
  background-color: #221e1a;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0) calc(100% - 5px), rgba(0, 0, 0, .55)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(100% - 7px), rgba(0, 0, 0, .6)),
    linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 50%, rgba(255, 240, 215, .06)),
    url("/tex/edge.webp");
  background-blend-mode: normal, normal, normal, normal;
  background-size: 100% 100%, 100% 100%, 100% 100%, auto 100%;
  background-position: 0 0, 0 0, 0 0, var(--tex-x, 0) 0;
}
[data-tex="photo"][data-cut="chipped"] .slab:has(.stone.limestone)::before {
  background-color: #a3967c;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0) calc(100% - 5px), rgba(40, 30, 15, .55)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(100% - 7px), rgba(40, 30, 15, .6)),
    linear-gradient(90deg, rgba(60, 45, 25, .3), rgba(0, 0, 0, 0) 50%, rgba(255, 250, 235, .1)),
    url("/tex/limestone.webp");
  background-blend-mode: normal, normal, normal, multiply;
  background-size: 100% 100%, 100% 100%, 100% 100%, 640px 640px;
}

/* the recess floor and the pebble get the real stone too */
[data-tex="photo"] .socket:not([data-accent] .socket) {
  background-image: url("/tex/limestone.webp");
  background-blend-mode: multiply;
  background-size: 640px 640px;
}
[data-tex="photo"] .pebble {
  background-image:
    radial-gradient(circle at 30% 28%, rgba(255, 240, 215, .22), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .5) 100%),
    url("/tex/basalt.webp");
  background-blend-mode: normal, normal;
  background-size: 100% 100%, 300px 300px;
}

/* ══════════════════════════════════════════════════════════════
   ITERATIONS: the door-label history, for /iterations/ only.
   v1 CSS-noise limestone · v2 real tile, same label · v3 bold 700 ·
   v4 back to 600 (same CSS as v2) · v5 medium 500, hairline · Sean chose v3 (now the default)
   ══════════════════════════════════════════════════════════════ */
[data-iter="v1"] .stone.limestone, [data-iter="v2"] .stone.limestone, [data-iter="v4"] .stone.limestone {
  color: #3a3024; font-weight: 600; letter-spacing: .005em;
  text-shadow: 0 1px 0 rgba(255, 252, 244, .8), 0 -1px 0 rgba(60, 45, 25, .22);
}
[data-iter="v1"] .stones .stone, [data-iter="v2"] .stones .stone, [data-iter="v4"] .stones .stone { font-size: 1.4rem; }
[data-iter="v5"] .stone.limestone {
  color: #2e261c; font-weight: 500; letter-spacing: .005em;
  text-shadow: 0 1px 0 rgba(255, 252, 244, .5);
}
[data-iter="v5"] .stones .stone { font-size: 1.45rem; }

/* ── dark surface: the basalt needs a rim of light to separate from the page ── */
:root[data-theme="dark"] { --trav-base: #3b342d; --trav-deep: #2b2520; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --trav-base: #3b342d; --trav-deep: #2b2520; } }

:root[data-theme="dark"] [data-tex="photo"][data-cut="chipped"] .stone:not(.limestone),
:root[data-theme="dark"][data-tex="photo"][data-cut="chipped"] .stone:not(.limestone) {
  background-image:
    linear-gradient(135deg, rgba(255, 240, 215, .20) 0%, rgba(255, 240, 215, .04) 35%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .30) 100%),
    linear-gradient(90deg, rgba(10, 8, 6, .22) 0%, rgba(10, 8, 6, .12) 40%, rgba(10, 8, 6, 0) 70%),
    linear-gradient(rgba(14, 11, 8, 0), rgba(14, 11, 8, 0)),
    url("/tex/basalt.webp");
  box-shadow:
    inset 2.5px 2.5px 1px rgba(255, 238, 210, .34),
    inset 0 0 0 1px rgba(255, 238, 210, .10),
    inset -3px -3px 3px rgba(0, 0, 0, .65),
    inset 8px 8px 10px -5px rgba(255, 238, 210, .12);
}
:root[data-theme="dark"] [data-cut="chipped"] .slab:has(.stone:not(.limestone)),
:root[data-theme="dark"][data-cut="chipped"] .slab:has(.stone:not(.limestone)) {
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 238, 210, .16))
    drop-shadow(0 1px 1px rgba(0, 0, 0, .6))
    drop-shadow(4px 7px 6px rgba(0, 0, 0, .55))
    drop-shadow(8px 14px 14px rgba(0, 0, 0, .35));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-tex="photo"][data-cut="chipped"] .stone:not(.limestone) {
    background-image:
      linear-gradient(135deg, rgba(255, 240, 215, .20) 0%, rgba(255, 240, 215, .04) 35%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .30) 100%),
      linear-gradient(90deg, rgba(10, 8, 6, .22) 0%, rgba(10, 8, 6, .12) 40%, rgba(10, 8, 6, 0) 70%),
      linear-gradient(rgba(14, 11, 8, 0), rgba(14, 11, 8, 0)),
      url("/tex/basalt.webp");
    box-shadow:
      inset 2.5px 2.5px 1px rgba(255, 238, 210, .34),
      inset 0 0 0 1px rgba(255, 238, 210, .10),
      inset -3px -3px 3px rgba(0, 0, 0, .65),
      inset 8px 8px 10px -5px rgba(255, 238, 210, .12);
  }
  :root:not([data-theme="light"])[data-cut="chipped"] .slab:has(.stone:not(.limestone)) {
    filter:
      drop-shadow(-1px -1px 0 rgba(255, 238, 210, .16))
      drop-shadow(0 1px 1px rgba(0, 0, 0, .6))
      drop-shadow(4px 7px 6px rgba(0, 0, 0, .55))
      drop-shadow(8px 14px 14px rgba(0, 0, 0, .35));
  }
}