/* Woven canvas + blind relief. No dependencies or external assets. */
.canvas {
  --canvas-color: #d8cbb5;
  --canvas-ink: #39392f;
  --weave-size: 5px;
  --weave-opacity: .3;
  --relief-x: 1.4px;
  --relief-y: 1.8px;
  --relief-light: rgb(255 251 234 / .85);
  --relief-shade: rgb(71 54 31 / .48);
  position: relative;
  isolation: isolate;
  color: var(--canvas-ink);
  background: var(--canvas-color);
}

/* The weave sits across the surface AND relief, so letters feel made
   from the same cloth. Keep this layer non-interactive. */
.canvas::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: var(--weave-opacity);
  background-image:
    repeating-linear-gradient(0deg,
      rgb(60 43 23 / .24) 0 .6px, transparent .6px 2px,
      rgb(255 255 242 / .6) 2px 2.7px, transparent 2.7px 5px),
    repeating-linear-gradient(90deg,
      rgb(60 43 23 / .26) 0 .7px, transparent .7px 2px,
      rgb(255 255 242 / .65) 2px 2.8px, transparent 2.8px 5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' d='M0 0h180v180H0z' opacity='.32'/%3E%3C/svg%3E");
  background-size: var(--weave-size) var(--weave-size),
    var(--weave-size) var(--weave-size), 180px 180px;
  mix-blend-mode: multiply;
}

/* Light comes from the upper left. Surface-colored faces keep the
   effect blind; shadows supply the shape. Use on large display text. */
.canvas-raised {
  color: var(--canvas-color);
  text-shadow:
    calc(-1 * var(--relief-x)) calc(-1 * var(--relief-y)) 1px var(--relief-light),
    var(--relief-x) var(--relief-y) 1px var(--relief-shade),
    calc(var(--relief-x) * 2) calc(var(--relief-y) * 2) 4px rgb(71 54 31 / .2);
}

.canvas-pressed {
  color: var(--canvas-color);
  text-shadow:
    calc(-1 * var(--relief-x)) calc(-1 * var(--relief-y)) 1px var(--relief-shade),
    var(--relief-x) var(--relief-y) 1px var(--relief-light);
}

.canvas-relief {
  background-color: var(--canvas-color);
  box-shadow: -2px -2px 3px var(--relief-light),
    3px 4px 6px rgb(71 54 31 / .25),
    inset 1px 1px 1px rgb(255 251 234 / .45);
}

.canvas-relief--pressed {
  box-shadow: inset 2px 3px 5px rgb(71 54 31 / .3),
    inset -2px -2px 3px var(--relief-light),
    1px 1px 1px rgb(255 251 234 / .4);
}

/* Essential copy and controls stay inked and readable. */
@media (forced-colors: active) {
  .canvas::after { display: none; }
  .canvas-raised, .canvas-pressed { color: CanvasText; text-shadow: none; }
  .canvas-relief { border: 1px solid ButtonText; }
}