/* Viewport siblings of the animated page: never inherit camera/reveal motion.
   One continuous watermark covers every section, including hero transitions. */
.draft-watermark {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.draft-watermark span {
  display: block;
  font-family: var(--sans);
  font-size: clamp(76px, 21vw, 300px);
  font-size: clamp(76px, min(21vw, 36svh), 300px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  color: rgba(193, 43, 43, .19);
  -webkit-text-stroke: 1px rgba(255, 255, 255, .22);
  transform: rotate(-28deg);
}
.draft-notice {
  position: fixed;
  inset: auto 0 0;
  z-index: 201;
  max-width: none;
  margin: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 252, 248, .97);
  border-top: 1px solid rgba(180, 30, 30, .22);
  color: #b51e25;
  font-size: clamp(12px, 1.25vw, 17px);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}
.draft-notice em { font-style: italic; }
/* Keep final footer content and pinned hero controls clear of the notice. */
body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
.story-bottom { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
@media print {
  .draft-watermark span { color: rgba(193, 43, 43, .19); }
  .draft-watermark, .draft-notice { print-color-adjust: exact; }
}