/* qingming-drawn.css: /qingming/drawn/, one plate of 清明上河图 painted anew, with the weather laid over it in
   JavaScript (qingming-drawn.js). Kept in its own sheet: the site's CSP has no unsafe-inline for styles. */

@font-face {
  font-family: "Qingming Newsreader";
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
/* a dark room: the shared chrome follows the page's colour scheme, so it is declared */
html { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #16120e; overflow: hidden; }
body {
  display: grid; place-items: center;
  font: 14px/1.4 "Qingming Newsreader", ui-serif, serif;
  --ink: #16120e; --text: #efe6d2; --gold: #c9a15a;
}
/* the plate fits the window whole, letterboxed on the short side, never squashed */
.plate-stage {
  position: relative;
  height: min(100vh, calc(100vw * 1024 / 1536));
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
  --wet: 0;
}
.plate-stage > * { position: absolute; }
.plate-silk { inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.plate-people { inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* the wet silk: a cool grey laid over everything in multiply as the rain builds */
.plate-wet {
  inset: 0; z-index: 3; pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(180deg, #a9b6b8 0%, #b7bcb4 45%, #9ea7a4 100%);
  opacity: calc(var(--wet) * 0.42);
}
.plate-mist {
  inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(226, 229, 222, 0.5), transparent 70%),
    radial-gradient(50% 35% at 75% 60%, rgba(226, 229, 222, 0.45), transparent 70%);
  filter: blur(28px);
  opacity: calc(var(--wet) * var(--wet) * 0.32);
}
/* the shared rain layer leans its streaks to the right; the scroll's rain leans the other way, so the canvas is mirrored */
.plate-rain { inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; transform: scaleX(-1); }

/* The one control: the sound of the rain. A seal-sized ink disc in the
   lower right with the word Rain and, beside it, three threads that
   rise and fall with the rain while it plays. Until the visitor has
   touched the page the browser will not play, so the disc breathes and a
   line of type asks for the click; both settle once the rain is heard. */
.plate-sound {
  right: clamp(1rem, 2.5vw, 2.2rem); bottom: clamp(1rem, 2.5vw, 2.2rem); z-index: 6;
  display: flex; align-items: center; gap: 0.9rem;
}
/* the hint sits on the same ink as the disc, so it reads over water and paper alike */
.plate-sound-hint {
  margin: 0; padding: 0.45rem 0.85rem; border-radius: 999px;
  color: var(--text); background: color-mix(in srgb, var(--ink) 74%, transparent);
  font-style: italic; font-size: clamp(0.85rem, 1.1vw, 1rem); letter-spacing: 0.01em;
  backdrop-filter: blur(10px);
  transition: opacity 900ms ease;
}
.plate-sound[data-heard] .plate-sound-hint { opacity: 0; }
.plate-sound-toggle {
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 0.55rem;
  height: 3rem; padding: 0 0.95rem 0 0.85rem; border-radius: 999px;
  color: var(--text); background: color-mix(in srgb, var(--ink) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 26%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent), 0 6px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  cursor: pointer; font: inherit;
  transition: border-color 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}
.plate-sound-toggle:hover { border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.plate-sound-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.plate-sound-label {
  font-weight: 500; font-size: 1rem; line-height: 1; letter-spacing: 0.02em; transform: translateY(-0.04em);
}
/* three threads of rain: a level meter that only moves while the sound plays */
.plate-sound-threads { display: flex; align-items: flex-end; gap: 3px; height: 1.1rem; }
.plate-sound-threads i {
  display: block; width: 2px; height: 100%; border-radius: 1px; background: var(--gold);
  opacity: 0.55; transform-origin: bottom;
  --level: 0.27;
  transform: scaleY(var(--level));
  transition: transform 500ms ease, opacity 500ms ease;
}
.plate-sound-toggle[aria-pressed="true"] .plate-sound-threads i {
  opacity: 0.95;
  --level: calc(0.27 + 0.73 * var(--wet));
  animation: plate-thread 1.1s ease-in-out infinite alternate;
}
.plate-sound-toggle[aria-pressed="true"] .plate-sound-threads i:nth-child(2) { animation-delay: -0.35s; }
.plate-sound-toggle[aria-pressed="true"] .plate-sound-threads i:nth-child(3) { animation-delay: -0.7s; }
@keyframes plate-thread { from { transform: scaleY(calc(var(--level) * 0.55)); } to { transform: scaleY(var(--level)); } }
/* until heard, the disc breathes to ask for the click */
.plate-sound:not([data-heard]) .plate-sound-toggle { animation: plate-breathe 2.8s ease-in-out infinite; }
@keyframes plate-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent), 0 6px 24px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 0%, transparent), 0 6px 24px rgba(0, 0, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .plate-sound-toggle, .plate-sound-threads i { animation: none !important; }
}
.plate-status { position: absolute; left: -9999px; }
/* The page's heading is read, never drawn. Same recipe as .visually-hidden in
   business.css, redeclared because this page loads only its own sheet and the
   site's CSP has no unsafe-inline for styles. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}