/* Approved middle ink weight, using the original Naver font without synthetic bold. */
.speech {
  --speech-ink-edge: .6px;
  font-weight: 400;
  font-synthesis: none;
  -webkit-text-stroke: var(--speech-ink-edge) currentColor;
  background: transparent;
  isolation: isolate;
  overflow: visible;
}

.speech :is(p, em, span, strong) {
  -webkit-text-stroke: var(--speech-ink-edge) currentColor;
}

/* The paper covers the middle of the dots, keeping every line of dialogue clear. */
.speech::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #f8f6f2;
  pointer-events: none;
}

.speech::after {
  inset:0;
  content:"";position:absolute;z-index:-2;pointer-events:none;
  border-radius:inherit;
  transform:translate(9px,12px);
  background-image:radial-gradient(circle at 1.8px 1.8px,#b8b8b8 1.3px,transparent 1.45px),radial-gradient(circle at 5.3px 5.3px,#b8b8b8 1.3px,transparent 1.45px);
  background-size:7px 7px;
  background-repeat:repeat;
  background-position:0 0;
  opacity:.5;
  box-shadow:inset 0 0 6px 1px #000;
}
.speech .contour-inner-tone {
  position:absolute;inset:0;border-radius:inherit;
  z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1.8px 1.8px,#414141 1.3px,transparent 1.45px),radial-gradient(circle at 5.3px 5.3px,#414141 1.3px,transparent 1.45px);
  background-size:7px 7px;
  mask-image:radial-gradient(ellipse 53px 32px at 86% 86%,#000 8%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 53px 32px at 86% 86%,#000 8%,transparent 100%);
  opacity:.32;
}
.speech>p {position:relative;z-index:1}
.info-screen .quiet-corner-tone {
  position:absolute;right:6px;bottom:5px;width:60px;height:42px;
  pointer-events:none;
  background-image:radial-gradient(circle at 1.8px 1.8px,#bababa 1.3px,transparent 1.45px),radial-gradient(circle at 5.3px 5.3px,#bababa 1.3px,transparent 1.45px);
  background-size:7px 7px;
  mask-image:radial-gradient(ellipse at 100% 100%,#000 0%,#0009 30%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 100% 100%,#000 0%,#0009 30%,transparent 72%);
  opacity:.26;
}

/* Keep INFO text above the quiet corner decoration. */
.info-screen .info-body { position:relative; z-index:1; }
@media (forced-colors:active) {
  .speech { background:Canvas; -webkit-text-stroke:0; }
  .speech :is(p,em,span,strong) { -webkit-text-stroke:0; }
  .speech::before,.speech::after,.contour-inner-tone,.quiet-corner-tone { display:none; }
}

/* Native-coordinate vector dots follow the paper already printed in the artwork. */
.art-strip img.raster-halftone {
  pointer-events:none;
  z-index:2;
  transform:translateY(var(--tone-shift,0%));
}
/* The closing message should have the same visual scale as its neighbours. */
.speech.farewell-speech {
  width:86%;
  padding:20px 16px 21px;
  font-size:clamp(24px,6.7vw,28px);
  line-height:1.35;
}
.speech.farewell-speech .farewell-title {
  font-size:1.08em;
  margin-bottom:6px;
}
@media (forced-colors:active) {
  .raster-halftone {display:none}
}

/* Leave room for the shadow, without exposing the next panel from this shared image. */
.art-strip[data-raster-crop="top"]>img:not(.raster-halftone):not(.raster-floating) {
  clip-path:inset(0 0 57.8125% 0)!important;
}

/* Two connected closing bubbles; the original wording and real handwriting font stay live. */
.farewell-dialogue {
  position:relative;
  isolation:isolate;
  width:92%;
  margin:-10px auto 0;
  padding:0 0 13px;
}
.farewell-paper {
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  z-index:-1;pointer-events:none;
}
.farewell-dialogue .speech.farewell-speech {
  width:84%;margin:0 auto;
  padding:23px 12px 18px;
  border:0;border-radius:0;box-shadow:none;
  background:none;
  font-size:clamp(24px,6.7vw,28px);line-height:1.35;
  -webkit-text-stroke:.6px currentColor;
}
.farewell-dialogue .speech::before,.farewell-dialogue .speech::after {display:none}
.farewell-dialogue .farewell-followup {
  margin-top:24px!important;
  padding-top:18px!important;
  padding-bottom:21px!important;
  transform:translateX(-1%);
}
.farewell-dialogue .farewell-title {margin-bottom:5px;font-size:1.08em}
/* Only image entrances with an exposed straight cut receive this short dot fade. */
.art-strip[data-tone-edge="top"]::after {
  content:"";position:absolute;top:-1px;left:0;right:0;
  height:clamp(34px,13.9vw,83px);
  background:linear-gradient(to bottom,#000 0%,#000a 22%,#0004 50%,transparent 85%),url("assets/panel-edge-halftone.svg") center top/100% 100% no-repeat;
  pointer-events:none;z-index:4;
}
@media (forced-colors:active) {
  .farewell-paper,.art-strip[data-tone-edge="top"]::after {display:none}
  .farewell-dialogue .speech.farewell-speech {background:Canvas;border:1px solid CanvasText}
}

/* Tighter handwritten dialogue rhythm; raster lettering remains untouched. */
.speech,.speech.info-intro {line-height:1.28}
.farewell-dialogue .speech.farewell-speech {line-height:1.22}
.farewell-dialogue .speech .farewell-title {margin-bottom:2px;line-height:1.22}
/* Small, quiet audience tags beneath the cover title. */
.cover {height:auto;min-height:min(820px,90svh);padding-bottom:42px}
.cover .scroll-cue {position:relative;bottom:auto;margin-top:28px;flex-shrink:0}
.cover-tags {
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  margin:8px 20px 0;
  color:#a298aa;font-size:11px;line-height:1.5;
  letter-spacing:.025em;font-weight:400;
}
.cover-tags span {white-space:nowrap}
@media(max-width:390px){.cover-tags{font-size:10px;gap:2px;margin-top:6px}}
@media(max-width:800px){.cover{height:auto;min-height:max(510px,86svh)}}