/* kismetPaws kit: the look shared by kismetpaws.com and the story, tales and stickers sites (docs/CONTRACT.md §13).
     <link rel="stylesheet" href="https://kismetpaws.com/kit/kit.css">
   A scrapbook made with picture-book inks: real paper (tape, lined sheets, a kraft tag, a stamp, a ring stamp, a strip),
   typed labels and buttons, handwriting only for small notes; four spot inks (story red, tale blue, stickers green,
   sunflower yellow), Young Serif headings, Atkinson Hyperlegible for reading. Paper only: there is no dark version.
   Everything is prefixed kp- so it never collides with a site's own classes; a site may also use only the tokens.
   Paper pictures are next to this file (kismetpaws.com/kit/tape.webp, lined, strip, tag, stamp, ring). Use them through the
   classes here, or by their full URL: a url() inside a custom property resolves against the stylesheet that uses it, so
   this file deliberately has no --kp-* picture variables. */
@import url('https://fonts.googleapis.com/css2?family=Young+Serif&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Special+Elite&family=Gochi+Hand&display=swap');

:root {
  --kp-page: #efe9dc; --kp-page-2: #e6dfcf; --kp-paper: #fffdf7; --kp-ink: #27304f; --kp-soft: #5d5a66; --kp-faint: #8d8994; --kp-pen: #2a4aa8;
  --kp-rule: color-mix(in srgb, #27304f 22%, transparent);
  --kp-red: #e8553f; --kp-red-ink: #c23b26; --kp-yellow: #ffc63d; --kp-blue: #5b7fe0; --kp-blue-ink: #3a5bc4; --kp-green: #2f9c6b; --kp-green-ink: #247a53;
  --kp-story: var(--kp-red); --kp-tale: var(--kp-blue); --kp-stickers: var(--kp-green);
  --kp-ok: var(--kp-green-ink); --kp-bad: var(--kp-red-ink);
  --kp-serif: 'Young Serif', Georgia, 'Times New Roman', serif;
  --kp-sans: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --kp-typed: 'Special Elite', 'Courier New', ui-monospace, monospace;
  --kp-hand: 'Gochi Hand', 'Comic Sans MS', cursive;
  --kp-lift: 0 2px 0 rgba(39, 48, 79, .08), 0 8px 18px -10px rgba(40, 30, 20, .35);
  --kp-dots: radial-gradient(circle, rgba(39, 48, 79, .12) 1px, transparent 1.4px) 0 0 / 18px 18px;
  --kp-cut: polygon(0 5%, 3% 0, 97% 3%, 100% 0, 99% 95%, 96% 100%, 4% 97%, 0 100%);
}
/* A remembered pet: the yellow becomes a quiet blue-grey and the red misprint becomes ink. Put .kp-remember on any box. */
.kp-remember { --kp-yellow: #dfe3ee; --kp-red: #27304f; --kp-story: #27304f; }

/* the page */
.kp-page { background: var(--kp-dots), var(--kp-page); color: var(--kp-ink); font: 17px/1.6 var(--kp-sans); }

/* type */
.kp-h { font: 400 clamp(30px, 5vw, 46px)/1.08 var(--kp-serif); letter-spacing: -.01em; margin: 0 0 .4em; color: var(--kp-ink); text-wrap: balance; }
.kp-h2 { font: 400 clamp(24px, 3.4vw, 32px)/1.12 var(--kp-serif); margin: 0 0 .4em; color: var(--kp-ink); }
.kp-h3 { font: 400 22px/1.15 var(--kp-serif); margin: 0; color: var(--kp-ink); }
.kp-typed { font: 400 14px/1.4 var(--kp-typed); letter-spacing: .01em; }
.kp-hand { font: 400 22px/1.15 var(--kp-hand); color: var(--kp-pen); }
.kp-soft { color: var(--kp-soft); }

/* buttons: one ink block with a hand-cut edge; it presses in like a rubber stamp */
.kp-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 50px; padding: 8px 22px; border: 0; border-radius: 0;
  background: var(--kp-ink); color: #fbf7ee; text-decoration: none; text-align: center; font: 400 16px/1.25 var(--kp-typed); letter-spacing: .02em;
  cursor: pointer; clip-path: var(--kp-cut); -webkit-tap-highlight-color: transparent; transition: background .15s; }
.kp-btn:hover { background: #1b2340; }
.kp-btn:active { transform: translate(2px, 2px); }
.kp-btn.kp-paper { background: var(--kp-paper); color: var(--kp-ink); box-shadow: inset 0 0 0 2px var(--kp-ink); }
.kp-btn.kp-paper:hover { background: #fff; }
.kp-btn.kp-small { min-height: 40px; padding: 6px 14px; font-size: 14px; }
.kp-btn.kp-wide { display: flex; width: 100%; }
.kp-btn[disabled], .kp-btn[aria-disabled="true"] { background: #c9c3b6; color: #625e57; cursor: default; transform: none; }
.kp-btn.kp-paper[disabled] { box-shadow: inset 0 0 0 2px #c9c3b6; }
.kp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--kp-yellow), inset 0 0 0 2px var(--kp-ink); clip-path: none; }
.kp-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--kp-ink); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--kp-accent, var(--kp-red)); }
.kp-link:hover { text-decoration-color: var(--kp-ink); }

/* product ink: a small flat square in the product's colour; set the product on any ancestor */
.kp-story { --kp-accent: var(--kp-story); } .kp-tale { --kp-accent: var(--kp-tale); } .kp-stickers { --kp-accent: var(--kp-stickers); }
.kp-ink { display: inline-block; width: 12px; height: 12px; background: var(--kp-accent, var(--kp-ink)); flex: none; }

/* state words, typed and boxed */
.kp-state { display: inline-block; font: 400 13px/1.35 var(--kp-typed); padding: 1px 7px; border: 1.5px solid currentColor; white-space: nowrap; color: var(--kp-soft); }
.kp-state.ready { color: var(--kp-green-ink); } .kp-state.making { color: var(--kp-pen); } .kp-state.attention { color: var(--kp-red-ink); }

/* index card; data-tab="Story" puts a coloured divider tab on top in the product's ink */
.kp-card { position: relative; background: var(--kp-paper); padding: 20px 18px 18px; box-shadow: var(--kp-lift); color: var(--kp-ink); }
.kp-card[data-tab] { margin-top: 20px; }
.kp-card[data-tab]::before { content: attr(data-tab); position: absolute; left: 14px; top: -19px; height: 20px; padding: 0 11px; background: var(--kp-accent, var(--kp-ink));
  color: #fff; font: 400 12.5px/21px var(--kp-typed); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.kp-card[data-tab]::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--kp-accent, var(--kp-ink)); }

/* a lined sheet torn from a notebook */
.kp-lined { background: url(lined.webp?v=cf4769c575) center / 100% 100% no-repeat; filter: drop-shadow(0 5px 8px rgba(40, 30, 20, .18)); }
/* a taped note for a code, a share link or a gift: plain paper with tape at both top corners, so it keeps its look at any size
   (the torn strip picture stretched badly on wide screens) */
.kp-strip { position: relative; padding: 26px 24px 20px; background: #f8f1df; box-shadow: var(--kp-lift); transform: rotate(.6deg); }
.kp-strip::before, .kp-strip::after { content: ''; position: absolute; top: -14px; width: 88px; height: 38px; background: url(tape.webp?v=1e7edc5f0e) center / contain no-repeat; pointer-events: none; }
.kp-strip::before { left: -14px; transform: rotate(-14deg); } .kp-strip::after { right: -14px; transform: rotate(12deg) scaleX(-1); }
.kp-strip code, .kp-code { font: 400 18px/1.2 var(--kp-typed); letter-spacing: .1em; color: var(--kp-red-ink); }

/* tape on a picture: <div class="kp-taped"><img …><i class="kp-tape l"></i><i class="kp-tape r"></i></div> */
.kp-taped { position: relative; }
.kp-tape { position: absolute; z-index: 2; width: 34%; aspect-ratio: 2.1; top: -9%; pointer-events: none; background: url(tape.webp?v=1e7edc5f0e) center / contain no-repeat; }
.kp-tape.l { left: -9%; transform: rotate(-18deg); } .kp-tape.r { right: -9%; transform: rotate(14deg) scaleX(-1); } .kp-tape.c { left: 31%; top: -11%; width: 40%; transform: rotate(-3deg); }
/* a polaroid of the real photo */
.kp-polaroid { position: relative; background: #fff; padding: 7px 7px 28px; box-shadow: 0 3px 6px rgba(40, 30, 20, .22); transform: rotate(-4deg); }
.kp-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.kp-polaroid figcaption, .kp-polaroid .kp-hand { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 17px; }
/* a cut-out puppet with the red misprint behind it */
.kp-puppet { filter: drop-shadow(6px 4px 0 var(--kp-red)); }
/* a piece of yellow paper cut with scissors, to sit behind a picture */
.kp-cutout { background: var(--kp-yellow); clip-path: polygon(1% 2%, 30% 0, 62% 2%, 100% 0, 98% 40%, 100% 76%, 97% 100%, 55% 98%, 20% 100%, 0 97%, 2% 52%); }

/* lists with bold rules, from the picture book */
.kp-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.kp-rows > * { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--kp-ink); color: var(--kp-ink); text-decoration: none; min-width: 0; }
.kp-rows > :first-child { border-top: 2px solid var(--kp-ink); }
.kp-kind { flex: none; min-width: 52px; text-align: center; padding: 2px 6px; font: 400 12px/1.4 var(--kp-typed); color: #fff; background: var(--kp-accent, var(--kp-ink)); }

/* fields */
.kp-field { display: grid; gap: 6px; }
.kp-field > label, .kp-label { font: 700 15px/1.3 var(--kp-sans); color: var(--kp-ink); }
.kp-input, .kp-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .kp-field select, .kp-field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--kp-ink); border-radius: 0; background: var(--kp-paper); color: var(--kp-ink); font: 16px/1.4 var(--kp-sans); }
.kp-field textarea { min-height: 130px; resize: vertical; }
.kp-input:focus-visible, .kp-field :focus-visible { outline: 3px solid var(--kp-yellow); outline-offset: 0; }
.kp-field small, .kp-hint { color: var(--kp-soft); font-size: 14px; }
/* a row of choices that look like typed tabs */
.kp-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-choices label { margin: 0; position: relative; }
.kp-choices input { position: absolute; opacity: 0; pointer-events: none; }
.kp-choices span { display: inline-block; padding: 7px 14px; background: var(--kp-paper); box-shadow: inset 0 0 0 2px var(--kp-ink); font: 400 15px var(--kp-typed); cursor: pointer; }
.kp-choices input:checked + span { background: var(--kp-ink); color: #fbf7ee; }
.kp-choices input:focus-visible + span { outline: 3px solid var(--kp-yellow); }

/* notes: a slip of cream paper held on by a short strip of tape. Plain, it is information. For an outcome add a rubber
   stamp: .kp-ok (green, a tick), .kp-warn (mustard, "!") or .kp-bad (red, a cross). The words stay in ink, and the stamp's
   mark tells the kinds apart, so colour is never the only signal. Give it ~10px of room above for the tape.
   The stamps are drawn inline (no picture file): a mask needs CORS, and the other sites load this file from kismetpaws.com. */
.kp-note { position: relative; padding: 14px 18px 13px; background: #f8f1df; color: var(--kp-ink);
  box-shadow: 0 1px 0 rgba(39, 48, 79, .08), 0 3px 7px -4px rgba(40, 30, 20, .4); }
.kp-note::before { content: ''; position: absolute; top: -9px; left: 50%; width: 74px; height: 19px; margin-left: -37px; pointer-events: none;
  background: rgba(222, 208, 168, .78); transform: rotate(-2.5deg);
  clip-path: polygon(0 12%, 3% 0, 97% 6%, 100% 0, 98% 34%, 100% 62%, 97% 84%, 100% 100%, 3% 95%, 0 100%, 2% 68%, 0 42%); }
.kp-note > :first-child { margin-top: 0; } .kp-note > :last-child { margin-bottom: 0; }
.kp-note.kp-ok, .kp-note.kp-warn, .kp-note.kp-bad { min-height: 56px; padding-left: 58px; }
.kp-note.kp-ok::after, .kp-note.kp-warn::after, .kp-note.kp-bad::after { content: ''; position: absolute; left: 13px; top: 10px; width: 34px; height: 34px;
  background: var(--kp-stamp); transform: rotate(-9deg); pointer-events: none;
  -webkit-mask: var(--kp-mark) center / contain no-repeat; mask: var(--kp-mark) center / contain no-repeat; }
.kp-note.kp-ok { --kp-stamp: var(--kp-green-ink);
  --kp-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cfilter id='i' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2 1.85'/%3E%3CfeComposite in='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23i)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='17.6' stroke-width='2.8'/%3E%3Ccircle cx='20' cy='20' r='14.2' stroke-width='1.1'/%3E%3Cpath d='M13.6 20.6l4.4 4.6 8.4-10' stroke-width='3.4'/%3E%3C/g%3E%3C/svg%3E"); }
.kp-note.kp-warn { --kp-stamp: #b47a00;
  --kp-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cfilter id='i' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2 1.85'/%3E%3CfeComposite in='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23i)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='17.6' stroke-width='2.8'/%3E%3Ccircle cx='20' cy='20' r='14.2' stroke-width='1.1'/%3E%3Cpath d='M20 12.6v8.6' stroke-width='3.6'/%3E%3Ccircle cx='20' cy='27' r='1.2' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E"); }
.kp-note.kp-bad { --kp-stamp: var(--kp-red-ink);
  --kp-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cfilter id='i' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2 1.85'/%3E%3CfeComposite in='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23i)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='17.6' stroke-width='2.8'/%3E%3Ccircle cx='20' cy='20' r='14.2' stroke-width='1.1'/%3E%3Cpath d='M15 15l10 10M25 15L15 25' stroke-width='3.4'/%3E%3C/g%3E%3C/svg%3E"); }
.kp-error { color: var(--kp-red-ink); font-weight: 700; }

/* waiting. Whole page: the puppet walks on the spot (two frames, or one that steps).
   <div class="kp-walk"><img src="walk-a"><img src="walk-b"></div>   Inline: <span class="kp-spin"></span> in the product's ink. */
.kp-walk { position: relative; width: 74px; aspect-ratio: 1; flex: none; }
.kp-walk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(3px 2px 0 var(--kp-red)); animation: kp-step .45s ease-in-out infinite alternate; }
.kp-walk img + img { animation: kp-frame .9s steps(1) infinite; }
.kp-walk img:only-child { animation: kp-step .45s ease-in-out infinite alternate; }
@keyframes kp-step { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-6%) rotate(2deg); } }
@keyframes kp-frame { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.kp-spin { display: inline-block; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--kp-accent, var(--kp-pen)) 25%, transparent);
  border-top-color: var(--kp-accent, var(--kp-pen)); animation: kp-turn .8s linear infinite; vertical-align: -3px; }
@keyframes kp-turn { to { transform: rotate(360deg); } }
.kp-loading { display: flex; align-items: center; gap: 14px; color: var(--kp-soft); }
.kp-loading .kp-hand { font-size: 21px; }
@media (prefers-reduced-motion: reduce) {
  .kp-walk img, .kp-walk img:only-child { animation: none; } .kp-walk img + img { animation: none; opacity: 0; }
  .kp-spin { animation: kp-fade 1.4s ease-in-out infinite; } .kp-btn:active { transform: none; }
}
@keyframes kp-fade { 50% { opacity: .35; } }

/* a hand-drawn tick in red pen, for done items */
.kp-tick { display: inline-block; width: 22px; height: 22px; position: relative; flex: none; box-shadow: inset 0 0 0 2px var(--kp-ink); }
.kp-tick.done::after { content: ''; position: absolute; left: -2px; top: -9px; width: 30px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 16C8 19 10 22 12 25C16 15 21 8 28 3' fill='none' stroke='%23e8553f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }