/* Caveat (SIL OFL), bundled so it renders the same everywhere */
@font-face { font-family: "KM Caveat"; src: url("fonts/Caveat.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
/* kittenmoire.online theme - values from _shared/signup/DOMAINS.md */
:root {
  /* wordmark font: loose detective handwriting (bundled Caveat) */
  --su-font-display: "KM Caveat", "Ink Free", "Segoe Script", cursive;
  /* palette: "Dark burgundy and reds" */
  --su-bg: #2a0710;
  --su-ink: #f1dede;
  --su-muted: #c45a68;
  --su-accent: #b3122e;
  --su-accent-ink: #fff2f2;
  --su-field-bg: #3a0c18;
  --su-line: #6e1a2a;
  /* wordmark font: "dunno" - template default kept */
  /* body font: "dunno" - template default kept */
  --su-logo-size: 130px;
}

/* .online sub-label in the same Palatino as the wordmark */
.su-mark .su-sub { font-family: var(--su-font-display); }
.su-button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } /* button keeps its old font */
/* handwritten title: bigger, no caps-tracking, slight tilt like a jotted note */
.su-mark-words { font-size: 58px; letter-spacing: 0; transform: rotate(-2deg); }
.su-mark .su-sub { font-size: 20px; letter-spacing: .08em; text-transform: lowercase; transform: rotate(-2deg); }
/* fractured title: letters take turns slipping into fading, drifting ghosts; a red double of the whole name drifts behind */
.km-fracture { position: relative; display: inline-block; }
.km-l { display: inline-block; animation: km-flicker 11s ease-in-out infinite; animation-delay: calc(var(--i) * -2.3s); }
.km-slip { animation-duration: 13s; }
/* every letter cycles solid -> slipping ghost -> solid on its own offset clock, so the solid pattern keeps moving */
@keyframes km-flicker {
  0%, 30%   { opacity: 1;   color: inherit; filter: none;       transform: translate(0,0); }
  40%       { opacity: .55; color: #c4283a; filter: blur(.4px); transform: translate(1px,-2px); }
  55%       { opacity: .14; color: #c4283a; filter: blur(.8px); transform: translate(3px,-6px) rotate(3deg); }
  70%       { opacity: .32; color: #c4283a; filter: blur(.6px); transform: translate(1px,-3px) rotate(1deg); }
  82%, 100% { opacity: 1;   color: inherit; filter: none;       transform: translate(0,0); }
}
.km-fracture::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: #c4283a; opacity: .18; transform: translate(6px,-5px); filter: blur(1px); pointer-events: none; animation: km-ghost 9s ease-in-out infinite; }
@keyframes km-ghost { 0%,100% { transform: translate(6px,-5px); } 50% { transform: translate(12px,-9px); opacity: .08; } }
@media (prefers-reduced-motion: reduce) { .km-l, .km-fracture::after { animation: none; } .km-slip { opacity: .32; filter: blur(.6px); color: #c4283a; } }