/* Interactive extras: fragments, annotate mode. See extras.js. */

/* ---------- 1. Fragments ---------- */
.lotd { max-width: 680px; margin: 0 auto; text-align: center; }
.lotd .label { margin-bottom: 28px; }
.lotd blockquote {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px); line-height: 1.3; letter-spacing: -0.01em;
  text-wrap: balance;
}
.lotd blockquote.long { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.45; text-wrap: pretty; }
.lotd cite { display: block; margin-top: 24px; font-style: normal; font-size: 13px; color: var(--muted); }

/* ---------- 2. Annotate mode ---------- */
/* Notes live on a separate layer above the page, so they never push text around */
.anno-layer { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 5; pointer-events: none; }
.anno {
  position: absolute;
  display: none;
  font-family: "Caveat", cursive;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  color: var(--accent);
  transform: rotate(var(--tilt, -2deg));
  transform-origin: center;
  pointer-events: none;
}
.anno[hidden] { display: none !important; }
.annotating .anno { display: block; animation: anno-in .45s ease-out both; animation-delay: var(--d, 0ms); }
/* Hand-drawn arrows: curved stroke that draws itself in */
.anno-arrow {
  display: inline-block; vertical-align: -0.2em;
  width: 0.8em; height: 1.1em; margin-right: 0.3em;
  overflow: visible;
  transform: rotate(var(--angle, 0deg)) scaleX(-1); /* mirrored so the curve bows the other way */
}
.anno-arrow path {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.annotating .anno-arrow .shaft { animation: arrow-draw .5s ease-out both; animation-delay: calc(var(--d, 0ms) + 150ms); }
.annotating .anno-arrow .head { animation: arrow-draw .2s ease-out both; animation-delay: calc(var(--d, 0ms) + 600ms); }
@keyframes arrow-draw { from { stroke-dashoffset: 1; } }

@keyframes anno-in {
  from { opacity: 0; transform: rotate(var(--tilt, -2deg)) translateY(6px); }
}

.anno-mark { position: relative; white-space: nowrap; }
.anno-mark::after {
  content: ""; position: absolute; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.anno-mark.underline::after {
  left: -2px; right: -2px; bottom: -6px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 5 Q5 1 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%23d9677a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size: 40px 8px;
}
.anno-mark.circle::after {
  inset: -5px -9px;
  border: 1.8px solid var(--accent);
  border-radius: 52% 46% 55% 44% / 58% 50% 48% 54%;
  transform: rotate(-4deg);
}
.annotating .anno-mark::after { opacity: 1; }

.anno-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 13px;
  padding: 0; border: 0; background: none;
  color: var(--accent);
  cursor: pointer;
}
.anno-toggle .t { display: inline-grid; }
.anno-toggle .t > span { grid-area: 1 / 1; text-align: left; }
.anno-toggle .t-on { visibility: hidden; }
.anno-toggle[aria-pressed="true"] .t-on { visibility: visible; }
.anno-toggle[aria-pressed="true"] .t-off { visibility: hidden; }
.anno-toggle:hover .t > span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .anno-toggle { font-size: 16px; padding: 12px 6px; margin: 0 -6px; } /* bigger tap area */
  .anno-toggle .pen { position: relative; top: -3px; } /* sit level with the other menu links */
  .anno-toggle .t { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .annotating .anno-arrow path { animation: none; }
  .annotating .anno { animation: none; }
}