/* Porcelain paper with translucent cobalt carried by the water field. */
.brand .brand-mark { display:block; width:44px; height:44px; flex-shrink:0; }
.brand > span { font-family:var(--brush); font-size:29px; letter-spacing:3px; }
.brand small { font-family:var(--serif); font-size:10px; letter-spacing:1.5px; }

.hero { background:linear-gradient(115deg,#f7f5ec 5%,#edf2eb 48%,#dbe8ea 100%); }
.hero::before { animation:none; background:radial-gradient(ellipse at 78% 35%,#e6f2ed99,transparent 68%); }
.hero-art::before { display:none; }
.hero-art { pointer-events:none; }
.ink-canvas {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}
.hero-bottom { background:linear-gradient(100deg,#edf4eedb,#dce9e9e8); }
.drawing-controls { display:flex; align-items:center; gap:10px; margin-left:auto; }
.drawing-controls .motion-toggle { margin-left:0; }
.ink-reset {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:7px 11px;
  border:1px solid #234c8355;
  background:#f2f6f0dd;
  font-size:11px;
  letter-spacing:1px;
  white-space:nowrap;
  cursor:pointer;
  transition:background 180ms,border-color 180ms;
}
.ink-reset[hidden] { display:none; }
.ink-reset:hover { background:#f6f9f0; border-color:var(--blue); }
.ink-reset svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.3; }

@media(max-width:1100px) {
  .hero-bottom { flex-wrap:wrap; }
  .drawing-controls { gap:8px; }
  .hero-bottom .song-credits { gap:23px; }
}
@media(max-width:800px) {
  .brand .brand-mark { width:38px; height:38px; }
  .brand > span { font-size:25px; }
  .brand small { font-size:8px; }
  .hero-bottom .song-credits { flex:1 1 100%; }
  .drawing-controls { margin-left:0; }
}
@media(max-width:540px) {
  .brand .brand-mark { width:34px; height:34px; }
  .brand > span { font-size:23px; }
  .brand small { font-size:7px; letter-spacing:1px; }
  .hero { background:linear-gradient(155deg,#f7f5ec 8%,#edf2eb 42%,#d8e8ea 79%,#e6eeea); }
  .hero-art { margin-left:0; width:100%; height:350px; margin-top:0; }
  .hero-bottom { gap:15px; }
}