/* ==========================================================================
   stone.css | carved stone buttons for Creative Company
   Served from the site root: /stone/stone.css, assets in /stone/assets/.
   Texture tiles + CSS relief. No JavaScript.

   MARKUP
     CTA      <a class="stone stone--limestone" href="/essays/">Read the essay &rarr;</a>
              <button class="stone stone--basalt" type="submit">Get the Tuesday letter</button>
     Chip     <button class="stone stone--chip stone--limestone" aria-pressed="false">Italian</button>
              active chip: add .is-active (or aria-pressed="true") and switch to stone--basalt
     Round    <button class="stone stone--round stone--limestone" aria-label="Next painting">
                <svg class="stone__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <path d="M4 12h15M13 6l6 6-6 6"/></svg>
              </button>
              arrow-left  <path d="M20 12H5M11 6l-6 6 6 6"/>
              arrow-right <path d="M4 12h15M13 6l6 6-6 6"/>
              close       <path d="M6 6l12 12M18 6L6 18"/>
              (stroke is currentColor, so the icon takes the material's ink)

   MATERIALS  .stone--limestone  pale, dark ink   (vermilion, ink and dark overlays)
              .stone--basalt     dark, cream ink  (paper; the active filter chip)
              .stone--slate      dark, cool ink   (kept in the kit, unused on the site)
   SIZES      default 44px CTA | .stone--chip 36px | .stone--round 44px circle
              (.stone--round.stone--sm 40px)
   STATES     :hover  :active  :focus-visible  :disabled / [aria-disabled=true]
              SELECTED = [aria-pressed=true] | [aria-selected=true]
                         | [aria-current] (not "false") | .is-selected | .is-active
              .is-active is SELECTED (the renaissance filter JS toggles it).
              Specimen-only forcing classes: .is-hover .is-pressed .is-focus .is-disabled

   ANATOMY
     element   label (real text), focus ring, fallback slab (stone colour +
               bevel inside a 3px transparent border, shows if images fail),
               slab side + cast shadow (filter drop-shadows follow the chips)
     ::before  the face: tiled stone, broad light, bevel, chip lighting rims
               (soft-light), chipped silhouette from mask-composite
     ::after   the selected state's carved groove with its lime (or grout) inlay

   SILHOUETTE (why there are no hairlines at 125% / 150% zoom)
     Build B drew the mask as a 9-slice with joins 15 css px from each edge.
     At DPR 1.25 that is 18.75 device px: two pieces each half covered the
     same device row and their alpha composited to 0.75, so a faint line of
     the ground showed through. Now the face is (left u right u centre) n top
     n bottom: the unions overlap by 4px and the intersections are continuous,
     so there is no join anywhere, at any DPR. The four corners are mask
     layers in the union (16px squares, 12px radius). Top and bottom chips repeat
     every 384 css px, longer than any CTA, and each sibling starts at a
     different offset, so the chip pattern never repeats on one button.
   ========================================================================== */

.stone {
  /* material defaults = basalt */
  --stone-tex: url(/stone/assets/basalt.webp);
  --stone-tile: 256px;
  --stone-base: #2f2d2b;
  --stone-side: #171514;
  --stone-ink: #F1E9DC;
  --stone-carve: 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .07);
  --stone-icon-carve: drop-shadow(0 -1px 0 rgba(0, 0, 0, .85)) drop-shadow(0 1px 0 rgba(255, 255, 255, .08));
  --stone-glow: rgba(255, 246, 230, .09);
  --stone-shade: rgba(0, 0, 0, .26);
  --stone-hone: transparent;
  --stone-inlay: #DCD3BC;            /* lime mortar */
  --stone-honed: brightness(.8) saturate(1.15);
  /* geometry */
  --stone-h: 44px;
  --stone-bw: 3px;                   /* fallback slab inset */
  --stone-r: 12px 13px 11px 12px / 12px 11px 13px 12px;
  --stone-groove-in: 6px;
  --stone-groove-r: 6px;
  --stone-lift: 3px;
  --stone-sx: -37px;
  --stone-sy: -11px;
  --stone-tx: 0px;
  --stone-bx: -173px;
 
 
  --stone-ring-in: #FFF3EC;
  --stone-ring-out: #171412;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  box-sizing: border-box;
  min-height: var(--stone-h);
  max-width: 100%;
  padding: 8px 21px;
  margin: 0;
  border: var(--stone-bw) solid transparent;
  border-radius: var(--stone-r);
  /* fallback slab: what you see if the mask or the texture never loads */
  background:
    linear-gradient(176deg, rgba(255, 255, 255, .10), transparent 38%, rgba(0, 0, 0, .22)) padding-box,
    var(--stone-base) padding-box;
  color: var(--stone-ink);
  font: 600 11.5px/1.25 "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  text-shadow: var(--stone-carve);
  white-space: normal;
  vertical-align: middle;
  cursor: pointer;
  user-select: text;
  -webkit-user-select: text;
  -webkit-tap-highlight-color: transparent;
  /* 1: slab side (solid, follows the chipped silhouette)
     2: contact shadow   3: soft cast shadow, light from top-left */
  filter:
    drop-shadow(0 var(--stone-lift) 0 var(--stone-side))
    drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .36))
    drop-shadow(3px 7px 9px rgba(0, 0, 0, .28));
  transform: translateY(0);
  transition: transform .14s cubic-bezier(.3, .7, .4, 1), filter .14s ease;
}

/* the face */
.stone::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--stone-bw));
  z-index: -2;
  border-radius: var(--stone-r);
  background-color: var(--stone-base);
  background-image:
    radial-gradient(130% 160% at 18% 0%, var(--stone-glow), transparent 58%),
    linear-gradient(176deg, transparent 45%, var(--stone-shade)),
    linear-gradient(var(--stone-hone), var(--stone-hone)),
    var(--stone-tex);
  background-position: 0 0, 0 0, 0 0, var(--stone-sx) var(--stone-sy);
  background-size: 100% 100%, 100% 100%, 100% 100%, var(--stone-tile) var(--stone-tile);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -2px 2px rgba(0, 0, 0, .28),
    inset -1px 0 1px rgba(0, 0, 0, .18),
    inset 0 0 8px rgba(0, 0, 0, .16);
  transition: box-shadow .14s ease, filter .14s ease;
}

/* the selected groove lives here; empty otherwise */
.stone::after {
  content: "";
  position: absolute;
  inset: calc(var(--stone-groove-in) - var(--stone-bw));
  z-index: -1;
  border-radius: var(--stone-groove-r);
  pointer-events: none;
}

/* chipped silhouette + chip lighting (every current engine; older ones keep
   the plain rounded slab, which still reads as stone). Every mask layer is a
   file in /stone/assets/, centre fill included: if that folder fails to load,
   all layers fail together, the face drops out and the element's own
   fallback slab (stone colour, bevel, rounded) carries the label. */
@supports (mask-composite: intersect) {
  .stone::before {
    background-image:
      url(/stone/assets/rim-t.webp),
      url(/stone/assets/rim-b.webp),
      url(/stone/assets/rim-l.webp),
      url(/stone/assets/rim-r.webp),
      radial-gradient(130% 160% at 18% 0%, var(--stone-glow), transparent 58%),
      linear-gradient(176deg, transparent 45%, var(--stone-shade)),
      linear-gradient(var(--stone-hone), var(--stone-hone)),
      var(--stone-tex);
    background-position:
      var(--stone-tx) 0, var(--stone-bx) 100%, 0 50%, 100% 50%,
      0 0, 0 0, 0 0, var(--stone-sx) var(--stone-sy);
    background-size:
      384px 24px, 384px 24px, 16px calc(100% - 24px), 16px calc(100% - 24px),
      100% 100%, 100% 100%, 100% 100%, var(--stone-tile) var(--stone-tile);
    background-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-blend-mode: soft-light, soft-light, soft-light, soft-light, normal, normal, normal, normal;
    /* no border-radius here: Chrome draws a faint halo where a rounded clip
       meets a mask, so the corners are mask layers too */
    border-radius: 0;
    mask-image:
      url(/stone/assets/edge-t.png),
      url(/stone/assets/edge-b.png),
      url(/stone/assets/corner-tl.png),
      url(/stone/assets/corner-tr.png),
      url(/stone/assets/corner-bl.png),
      url(/stone/assets/corner-br.png),
      url(/stone/assets/fill.png),
      url(/stone/assets/edge-r.png),
      url(/stone/assets/edge-l.png);
    mask-position:
      var(--stone-tx) 0, var(--stone-bx) 100%,
      0 0, 100% 0, 0 100%, 100% 100%,
      50% 0, 100% 50%, 0 50%;
    mask-size:
      384px 160px, 384px 160px,
      16px 16px, 16px 16px, 16px 16px, 16px 16px,
      calc(100% - 26px) 100%, 16px calc(100% - 24px), 16px calc(100% - 24px);
    mask-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    /* (L u R u centre u 4 corners) n bottom n top */
    mask-composite: intersect, intersect, add, add, add, add, add, add, add;
  }
}

/* ---------------------------------------------------------------- materials */
.stone--basalt { /* defaults */ }

.stone--limestone {
  --stone-tex: url(/stone/assets/limestone.webp);
  --stone-tile: 192px;
  --stone-base: #d6c9b0;
  --stone-side: #9a9386;           /* the same stone in shadow: darker, cooler */
  --stone-lift: 2px;
  --stone-ink: #2A221B;
  --stone-carve: 0 1px 0 rgba(255, 252, 244, .5), 0 -1px 0 rgba(60, 40, 20, .25);
  --stone-icon-carve: drop-shadow(0 1px 0 rgba(255, 252, 244, .55)) drop-shadow(0 -1px 0 rgba(60, 40, 20, .25));
  --stone-glow: rgba(255, 252, 245, .18);
  --stone-shade: rgba(80, 62, 40, .16);
  --stone-inlay: #3b3128;           /* dark grout */
  --stone-honed: brightness(.93) saturate(1.2) sepia(.08);
}

.stone--slate {
  --stone-tex: url(/stone/assets/slate.webp);
  --stone-base: #3d4248;
  --stone-side: #1c1f23;
  --stone-ink: #EEF0F0;
  --stone-carve: 0 -1px 0 rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .08);
  --stone-glow: rgba(235, 242, 250, .09);
  --stone-shade: rgba(0, 0, 0, .24);
  --stone-inlay: #D9D6C8;
  --stone-honed: brightness(.82) saturate(1.1);
}

/* ---------------------------------------------------------------- sizes */
.stone--chip {
  --stone-h: 36px;
  --stone-groove-in: 5px;
  --stone-groove-r: 6px;
  --stone-r: 11px 12px 10px 11px / 11px 10px 12px 11px;
  padding: 6px 15px;
  font-size: 10.5px;
}
.stone--limestone.stone--chip { --stone-lift: 2px; }
.stone--chip { --stone-lift: 2px; }

.stone--round {
  --stone-h: 44px;
  --stone-r: 50%;
  --stone-groove-r: 50%;
  width: var(--stone-h);
  height: var(--stone-h);
  min-width: var(--stone-h);
  padding: 0;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}
.stone--round.stone--sm { --stone-h: 40px; }
.stone__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  filter: var(--stone-icon-carve);
  pointer-events: none;
}
.stone--sm .stone__icon { width: 18px; height: 18px; }
@supports (mask-composite: intersect) {
  .stone--round::before {
    background-image:
      url(/stone/assets/rim-round.webp),
      radial-gradient(130% 160% at 18% 0%, var(--stone-glow), transparent 58%),
      linear-gradient(176deg, transparent 45%, var(--stone-shade)),
      linear-gradient(var(--stone-hone), var(--stone-hone)),
      var(--stone-tex);
    background-position: center, 0 0, 0 0, 0 0, var(--stone-sx) var(--stone-sy);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, var(--stone-tile) var(--stone-tile);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-blend-mode: soft-light, normal, normal, normal, normal;
    border-radius: 0;
    mask-image: url(/stone/assets/edge-round.png);
    mask-position: center;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-composite: add;
  }
}

/* ---------------------------------------------------------------- variety */
/* siblings start the texture and every chipped edge at a different place */
.stone:nth-child(2n) { --stone-sx: -141px; --stone-sy: -83px;  --stone-tx: -131px; --stone-bx: -29px;  }
.stone:nth-child(3n) { --stone-sx: -205px; --stone-sy: -167px; --stone-tx: -257px; --stone-bx: -311px; }
.stone:nth-child(5n) { --stone-sx: -59px;  --stone-sy: -219px; --stone-tx: -83px;  --stone-bx: -211px; }
.stone:nth-child(7n) { --stone-sx: -173px; --stone-sy: -29px;  --stone-tx: -349px; --stone-bx: -97px;  }
.stone:nth-child(2n):not(.stone--round) { --stone-r: 13px 11px 12px 12px / 11px 13px 12px 12px; }
.stone--chip:nth-child(2n) { --stone-r: 10px 12px 11px 11px / 12px 10px 11px 12px; }

/* ---------------------------------------------------------------- states */
.stone:hover,
.stone.is-hover {
  --stone-lift: 4px;
  transform: translateY(-1px);
  filter:
    drop-shadow(0 var(--stone-lift) 0 var(--stone-side))
    drop-shadow(1px 3px 2px rgba(0, 0, 0, .34))
    drop-shadow(4px 10px 12px rgba(0, 0, 0, .28));
}
.stone--limestone:hover,
.stone--limestone.is-hover { --stone-lift: 3px; }
.stone:hover::before,
.stone.is-hover::before { filter: brightness(1.07); }

/* pressed: the slab sinks into its seat; side and cast shadow collapse, the
   seat's lip throws shade across the top-left of the face */
.stone:active,
.stone.is-pressed {
  --stone-lift: 1px;
  transform: translateY(2px);
  filter:
    drop-shadow(0 var(--stone-lift) 0 var(--stone-side))
    drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
  transition-duration: .05s;
}
.stone:active::before,
.stone.is-pressed::before {
  filter: brightness(.9);
  box-shadow:
    inset 3px 4px 7px rgba(0, 0, 0, .55),
    inset 1px 1px 2px rgba(0, 0, 0, .45),
    inset -1px -1px 1px rgba(255, 255, 255, .10),
    inset 0 0 10px rgba(0, 0, 0, .22);
}

/* selected: seated, honed (smoother, deeper tone, a polished sheen) and cut
   with a groove inlaid in pale lime, or dark grout on limestone. The groove
   is ::after, so the focus ring (outline + box-shadow) shows with it. */
.stone:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"]), .is-selected, .is-active) {
  --stone-lift: 1px;
  --stone-glow: rgba(255, 250, 240, .16);
  transform: translateY(1px);
  filter:
    drop-shadow(0 var(--stone-lift) 0 var(--stone-side))
    drop-shadow(0 1px 1px rgba(0, 0, 0, .32));
}
.stone:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"]), .is-selected, .is-active)::before {
  --stone-hone: rgba(18, 17, 16, .32);
  filter: var(--stone-honed);
  box-shadow:
    inset 2px 3px 5px rgba(0, 0, 0, .45),
    inset -1px -1px 1px rgba(255, 255, 255, .10),
    inset 0 0 10px rgba(0, 0, 0, .18);
}
.stone--limestone:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"]), .is-selected, .is-active)::before {
  --stone-hone: rgba(196, 178, 146, .42);
}
.stone:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"]), .is-selected, .is-active)::after {
  border: 1.5px solid var(--stone-inlay);
  /* the cut: shadow on the upper wall, a lit lower lip outside the groove */
  box-shadow:
    0 -1px 0 rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .16),
    inset 0 1px 1px rgba(0, 0, 0, .45);
}
.stone--limestone:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"]), .is-selected, .is-active)::after {
  box-shadow:
    0 -1px 0 rgba(60, 40, 20, .35),
    0 1px 0 rgba(255, 252, 244, .6),
    inset 0 1px 1px rgba(0, 0, 0, .4);
}
.stone:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"]), .is-selected, .is-active):hover {
  transform: translateY(0);
}

/* focus: two-tone ring (cream inside, ink outside) reads on red, paper and ink */
.stone:focus { outline: none; }
.stone:focus-visible,
.stone.is-focus {
  outline: 2px solid var(--stone-ring-out);
  outline-offset: 5px;
  box-shadow: 0 0 0 5px var(--stone-ring-in);
}

/* disabled: worn flat and dull, no lift, no response */
.stone:disabled,
.stone[aria-disabled="true"],
.stone.is-disabled {
  --stone-lift: 1px;
  cursor: not-allowed;
  transform: none;
  filter:
    drop-shadow(0 1px 0 var(--stone-side))
    drop-shadow(0 1px 1px rgba(0, 0, 0, .22))
    saturate(.35);
  pointer-events: none;
}
.stone:disabled::before,
.stone[aria-disabled="true"]::before,
.stone.is-disabled::before {
  filter: contrast(.7) brightness(1.04);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .15);
}
.stone--limestone:disabled,
.stone--limestone[aria-disabled="true"],
.stone--limestone.is-disabled { --stone-ink: #3a3027; }
.stone--basalt:disabled, .stone--basalt[aria-disabled="true"], .stone--basalt.is-disabled,
.stone--slate:disabled,  .stone--slate[aria-disabled="true"],  .stone--slate.is-disabled { --stone-ink: #E2DCD2; }

@media (prefers-reduced-motion: reduce) {
  .stone, .stone::before { transition: none; }
}

/* Windows high contrast: drop the imagery, keep a real button */
@media (forced-colors: active) {
  .stone { filter: none; border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .stone::before, .stone::after { display: none; }
  .stone__icon { filter: none; }
}