:root {
  /* The canvas for this piece: a soft celadon — the calm grey-green of
     Japanese garden ceramics. Cool enough that the warm sand grooves and the
     stones read clearly, and it shows through between every brush-stroke dash. */
  --ink: #6b4a36;
  --bg: #E9EFE8;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}

.scene-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--ink);
  overflow: visible;
}

.scene :is(line, path) {
  /* colour is set per-line via the stroke attribute (full palette) */
  stroke-linecap: round;
  fill: none;
}

/* Per-group dash weight. Raked sand reads as fine combed grooves; stone is heavier. */
.scene .paint-wall :is(line, path)   { stroke-width: 2.2; }
.scene .paint-sand :is(line, path)   { stroke-width: 2.4; }
.scene .paint-ripple :is(line, path) { stroke-width: 2.6; }
.scene .paint-shadow :is(line, path) { stroke-width: 2.6; }
.scene .paint-rock :is(line, path)   { stroke-width: 3.0; }
.scene .paint-moss :is(line, path)   { stroke-width: 2.6; }

.back-link {
  position: absolute;
  left: clamp(1rem, 3vw, 3rem);
  top: clamp(1rem, 3vw, 3rem);
  color: var(--ink);
  font-family: 'Untitled Sans', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(0.95rem, 2vw, 1.4rem);
  text-decoration: none;
  opacity: 0.7;
  z-index: 1;
}

.back-link::before {
  content: "← ";
}

.back-link:hover {
  opacity: 1;
}

.embedded .back-link {
  display: none;
}

.signature {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15em;
  color: var(--ink);
  font-family: 'Untitled Sans', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.05;
  opacity: 0.85;
  z-index: 1;
}

.signature-name {
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  font-weight: 400;
}

.signature-handle {
  color: inherit;
  font-size: clamp(0.95rem, 2vw, 1.6rem);
  text-decoration: underline;
  opacity: 0.9;
}

.signature-handle:hover {
  opacity: 1;
}

/* TEMP: hide the signature name and handle text. Remove to restore. */
.signature {
  display: none;
}