/* Inkstincts — shared tokens, type and reading styles (site + writing desk) */

:root {
  --paper: #f6efe1;
  --paper-2: #efe4cd;
  --card: #fbf6ea;
  --ink: #2a2440;
  --ink-soft: #5d5775;
  --line: rgba(42, 36, 64, 0.16);
  --gold: #b9821f;
  --gold-glow: #e8b84f;
  --rose: #c25b72;
  --sage: #62866c;
  --sky: #5f8fb3;
  --wash: #2a2440;
  --on-ink: #f6efe1;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

  --blob: 16px 26px 14px 24px / 24px 14px 26px 16px;
  --blob-2: 24px 14px 26px 16px / 14px 26px 16px 24px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --paper: #12152b;
  --paper-2: #1a1e3a;
  --card: #191d3a;
  --ink: #f3ead6;
  --ink-soft: #b9b5cb;
  --line: rgba(243, 234, 214, 0.18);
  --gold: #f0c265;
  --gold-glow: #ffd97a;
  --rose: #ee94a6;
  --sage: #9dc0a6;
  --sky: #8fb4cf;
  --wash: #080a18;
  --on-ink: #12152b;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--gold-glow); color: #2a2440; }

:focus-visible {
  outline: 2.5px dashed var(--rose);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------- buttons: little stickers ---------- */
.btn {
  --accent: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.75em 1.35em;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  color: var(--on-ink);
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--blob);
  box-shadow: 4px 4px 0 var(--accent);
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px) rotate(-0.6deg); box-shadow: 6px 6px 0 var(--accent); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); --accent: var(--rose); }
.btn.small { padding: 0.5em 1em; font-size: 0.9rem; box-shadow: 3px 3px 0 var(--accent); }
.btn[disabled] { opacity: 0.6; pointer-events: none; }

/* ---------- reading text ---------- */
.prose {
  font-size: clamp(1.14rem, 1.06rem + 0.3vw, 1.3rem);
  line-height: 1.8;
  overflow-wrap: break-word;
}
.prose p { margin: 0 0 1.25em; }
.prose h2 { font-size: 1.8em; margin: 1.7em 0 0.5em; }
.prose h3 { font-size: 1.4em; margin: 1.5em 0 0.4em; }
.prose h4 { font-size: 1.15em; margin: 1.4em 0 0.3em; }
.prose a {
  color: var(--rose);
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.prose blockquote {
  margin: 1.7em 0;
  padding: 0.1em 0 0.1em 1.3em;
  border-left: 3px solid var(--gold);
  font-style: italic;
  color: var(--ink-soft);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ul { padding-left: 1.3em; margin: 0 0 1.25em; }
.prose li { margin-bottom: 0.3em; }
.prose hr.orn { border: 0; margin: 2.2em 0; text-align: center; color: var(--gold); line-height: 1; }
.prose hr.orn::after { content: '✦  ✦  ✦'; letter-spacing: 0.35em; font-size: 0.9em; }
.prose.dropcap > p:first-of-type::first-letter {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-weight: 700;
  float: left;
  font-size: 4.3em;
  line-height: 0.78;
  padding: 0.07em 0.1em 0 0;
  color: var(--rose);
}

.chip {
  display: inline-block;
  padding: 0.15em 0.8em 0.2em;
  font-family: var(--hand);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--ink);
  border: 1.5px solid currentColor;
  border-radius: 999px 40px 999px 40px / 40px 999px 40px 999px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* pictures inside stories and posts */
.prose figure { margin: 2em 0; }
.prose figure img {
  width: 100%; height: auto; border: 1.5px solid var(--ink); border-radius: var(--blob); box-shadow: 5px 5px 0 var(--gold);
}
.prose figcaption { margin-top: 0.9em; text-align: center; font-family: var(--hand); font-size: 1.3rem; line-height: 1.2; color: var(--ink-soft); }