/* Quiet feedback: keep the notebook, original art, and handwritten typography. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 200;
  transform: translateY(-150%);
  padding: 12px 18px;
  background: var(--paper);
  border: 2px solid var(--rose);
  border-radius: 8px;
}
.skip-link:focus { transform: none; }
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid #965164;
  outline-offset: 4px;
}
:where(button, a) { touch-action: manipulation; }
:where(.button, .message-open, .sort-button, .fanart-original, .fanart-retry,
  .letter-close, .letter-skip, .fanart-modal-close, .legal-close, .faq-toggle) {
  transition: background var(--motion-fast), border-color var(--motion-fast),
    box-shadow var(--motion-fast), transform var(--motion-fast) var(--motion-ease);
}
:where(.button, .message-open, .sort-button, .fanart-original, .fanart-retry,
  .letter-close, .letter-skip, .fanart-modal-close, .legal-close, .faq-toggle):active {
  transform: translateY(1px);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-medium) var(--motion-ease);
}
.site-nav a[aria-current="location"] { color: var(--rose); }
.site-nav a[aria-current="location"]::after { transform: scaleX(1); }
.nav-toggle span { transition: transform var(--motion-medium) var(--motion-ease); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.tab-list { position: relative; isolation: isolate; }
.tab-indicator {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 5px;
  bottom: 5px;
  border-radius: 7px;
  background: var(--rose);
  box-shadow: 0 4px 12px rgba(185,98,115,.15);
  pointer-events: none;
  transition: transform var(--motion-medium) var(--motion-ease), width var(--motion-medium) var(--motion-ease);
}
.tab-list:has(.tab-indicator) button[aria-selected="true"] { background: transparent; box-shadow: none; }
.tab-list button { transition: color var(--motion-fast); }
.link-arrow { transition: transform var(--motion-medium) var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .link-card:hover .link-arrow { transform: translate(2px, -2px); }
  .message-card:focus-within { border-color: rgba(185,98,115,.45); }
}
@media (hover: none) {
  .fanart-image-button:hover img { transform: none; }
}
.letter-dialog, .legal-dialog { overscroll-behavior: contain; }
.modal-closing { pointer-events: none; }
.letter-dialog h2, .fanart-modal-description { overflow-wrap: anywhere; }
/* Keep the notebook grid, but let enlarged/long author names take real space. */
.message-cloud, .all-messages { align-items: stretch; }
.message-card {
  --note-line-step: max(30px, 1.8rem);
  --note-action-height: max(34px, 2rem);
  --note-badge-height: max(24px, 1.5rem);
  height: auto;
  min-height: calc(var(--note-card-pad-top) + var(--note-line-step) * 5 + var(--note-action-height) + var(--note-card-pad-bottom) + 2px);
}
.message-body { margin: 0; max-height: calc(var(--note-line-step) * 4); }
.message-card-footer {
  position: static;
  height: auto;
  flex: 1 0 auto;
  min-height: calc(var(--note-line-step) + var(--note-action-height));
  grid-template-rows: minmax(var(--note-line-step), auto) var(--note-action-height);
}
.message-meta { flex-wrap: wrap; align-content: start; gap: 0 9px; height: auto; }
.message-name { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.message-date { white-space: nowrap; flex-shrink: 0; }
.message-open { min-height: var(--note-action-height); }
.message-card > .occasion-badge {
  top: auto;
  bottom: calc(var(--note-card-pad-bottom) + (var(--note-action-height) - var(--note-badge-height)) / 2);
  height: var(--note-badge-height);
}
@media (pointer: coarse) {
  .message-card { --note-action-height: max(44px, 2rem); }
}
.fanart-modal-dialog { margin: 0; }
.fanart-modal-close {
  position: sticky;
  flex-shrink: 0;
  align-self: flex-end;
  top: 12px;
  right: auto;
  margin: 12px 12px -54px 0;
}
.fanart-image-stage {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  isolation: isolate;
  background: var(--paper-soft);
}
.fanart-image-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fanart-image-stage:not([data-state="ready"]) #fanartFullImage { opacity: 0; }
.fanart-image-status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,253,249,.97);
  color: var(--ink);
  font-size: .85rem;
  line-height: 1.65;
}
.fanart-image-status p { margin: 0; }
.fanart-image-stage[data-state="ready"] .fanart-image-status { display: none; }
.fanart-retry {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-soft);
  color: var(--rose);
  font-weight: 700;
  cursor: pointer;
}
.fanart-retry[hidden] { display: none; }

/* Temporary puzzle assembly; the unmodified photograph is the final surface. */
.fanart-image-button { position: relative; }
.reveal-enabled .fanart-card.reveal:not(.visible) .fanart-image-button picture,
.reveal-enabled .fanart-assembling .fanart-image-button picture { opacity: 0; }
.fanart-assembling .fanart-image-button:hover img { transform: none; }
.fanart-assembly {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.fanart-piece {
  position: absolute;
}
.fanart-piece canvas { display: block; width: 100%; height: 100%; }
.fanart-seam {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.fanart-seam svg { display: block; width: 100%; height: 100%; }
@media print {
  .fanart-image-button picture { opacity: 1 !important; }
  .fanart-assembly { display: none; }
}