:root {
  /* Warm woodblock "paper" — the ground of Hokusai's prints. Fuji is built
     from blue and white dashes laid over it; the paper is the sky. */
  --bg: #EAE0C4;
  --ink: #2A3D52;

  /* Mount Fuji palette — every dash is the same size; only colour varies. */
  --c-haze: #A9AFAC;
  --c-cloud: #F2ECDA;
  --c-fuji: #2B527E;
  --c-fuji-snow: #F7F3E7;
  --c-wave-deep: #122E50;
  --c-wave-dark: #1B4271;
  --c-wave-mid: #2F6CA3;
  --c-wave-light: #8FBFDB;
  --c-foam: #E9E3CF;
  --c-foam-bright: #FFFFFF;
  --c-boat: #CBA163;
  --c-boat-dark: #6E4A24;
}

* {
  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;
  overflow: visible;
}

/* One uniform dash for the entire image — same length, same weight, same cap. */
.scene :is(line, path) {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3.0;
}

.scene .paint-haze :is(line, path) { stroke: var(--c-haze); }
.scene .paint-cloud :is(line, path) { stroke: var(--c-cloud); }
.scene .paint-fuji :is(line, path) { stroke: var(--c-fuji); }
.scene .paint-fuji-snow :is(line, path) { stroke: var(--c-fuji-snow); }
.scene .paint-wave-deep :is(line, path) { stroke: var(--c-wave-deep); }
.scene .paint-wave-dark :is(line, path) { stroke: var(--c-wave-dark); }
.scene .paint-wave-mid :is(line, path) { stroke: var(--c-wave-mid); }
.scene .paint-wave-light :is(line, path) { stroke: var(--c-wave-light); }
.scene .paint-foam :is(line, path) { stroke: var(--c-foam); }
.scene .paint-foam-bright :is(line, path) { stroke: var(--c-foam-bright); }
.scene .paint-boat :is(line, path) { stroke: var(--c-boat); }
.scene .paint-boat-dark :is(line, path) { stroke: var(--c-boat-dark); }

.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;
}