/* reading someone else's firefly */
.read {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 0 16px; background: rgba(4,10,18,.55);
  opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.read.show { opacity: 1; pointer-events: auto; }
.read .panel { width: min(460px, 100%); font: 17px/1.65 var(--f-type); color: var(--type-ink); text-shadow: 0 0 1px rgba(236,230,214,.4); }
.read h2 { margin: 0 0 10px; font: italic 500 28px/1.15 var(--f-poem); letter-spacing: 0; }
.read p { margin: 0 0 14px; }
.read .note { white-space: pre-wrap; color: var(--ink-blue); text-shadow: 0 0 1px var(--ink-bleed), 0 0 9px rgba(255,170,90,.35); }
.read .stamp { font-size: 12.5px; letter-spacing: .06em; color: var(--ink-soft); }
.read .after { font-size: 14px; color: var(--ink-soft); }
.read .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.read button.flag { margin-left: auto; width: 44px; padding: 0; display: inline-grid; place-items: center; background: transparent; color: var(--ink-soft); border: 1px solid rgba(159,179,194,.3); font-size: 14px; }
.read button.flag:hover { color: var(--type-ink); border-color: rgba(236,230,214,.5); }

.loading {
  position: fixed; inset: 0; display: grid; place-items: center; background: var(--fog);
  font: 15px var(--f-type); letter-spacing: .1em; color: var(--ink-soft); transition: opacity 1.4s ease; z-index: 5;
}
.loading.done { opacity: 0; pointer-events: none; }
.loading span::after { content: ""; animation: dots 1.6s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cue::after { animation: none; } }