/*
 * Donna comic visual kit (Issue #9052, slice 1 of the persona-D redesign).
 * Spec: docs/growth/2026-10-07-donna-site-redesign-spec.md section 3.
 *
 * Light mode only (Rajiv, DM D0AMF0XE6TS ts 1791365457.006239). Londrina Solid is
 * self-hosted and used for h1/h2 and caption labels only; body stays Inter.
 * No third-party font requests.
 *
 * Text/background pairs allowed by this kit (all WCAG AA, see verify.mjs):
 *   ink on paper, ink on mustard, ink on white, ink on lavender-tint,
 *   white on indigo, indigo on paper, indigo on white.
 * Forbidden: indigo text on mustard (~3.4:1). Lavender is decorative only.
 */
@font-face {
  font-family: "Londrina Solid";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/londrina-solid-latin-400.woff2") format("woff2");
}

.dk-home, .dk-page {
  color-scheme: light;
  /* palette */
  --dk-ink: #14122b;
  --dk-indigo: #4f46e5;
  --dk-lavender: #a5b4fc;
  --dk-lavender-tint: #e0e7ff;
  --dk-mustard: #f7c948;
  --dk-paper: #faf7f0;
  --dk-white: #ffffff;
  --dk-success: #16a34a;
  --dk-error: #b91c1c;
  /* line + shadow */
  --dk-outline: 3px solid var(--dk-ink);
  --dk-outline-sm: 2px solid var(--dk-ink);
  --dk-shadow: 6px 6px 0 var(--dk-ink);
  --dk-shadow-sm: 4px 4px 0 var(--dk-ink);
  --dk-radius: 6px;
  --dk-gutter: 12px;
  --dk-halftone: radial-gradient(rgba(20, 18, 43, 0.14) 1.2px, transparent 1.4px) 0 0 / 10px 10px;
  /* type */
  --dk-font-display: "Londrina Solid", Impact, "Arial Narrow", sans-serif;
  --dk-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tap: 44px;
}

.dk-page, .dk-page *, .dk-page *::before, .dk-page *::after { box-sizing: border-box; }
.dk-page {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--dk-paper);
  color: var(--dk-ink);
  font-family: var(--dk-font-body);
  line-height: 1.55;
}
.dk-page h1, .dk-page h2, .dk-caption {
  font-family: var(--dk-font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.dk-page h1 { font-size: clamp(2.6rem, 8vw, 5.6rem); margin: 0.4em 0; }
.dk-page h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 0.5em; }
.dk-page h3 { font-size: 1.2rem; margin: 0.2rem 0; }

.dk-wrap { width: min(100%, 1180px); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
.dk-section { padding-block: 3rem; }

/* wordmark: "HeyDonna" in ink, ".law" in indigo (indigo on paper/white only) */
.dk-wordmark { font-family: var(--dk-font-display); font-size: 1.8rem; color: var(--dk-ink); text-decoration: none; display: inline-flex; align-items: center; }
.dk-wordmark-tld { color: var(--dk-indigo); }

/* surfaces */
.dk-mustard { background-color: var(--dk-mustard); color: var(--dk-ink); border-block: var(--dk-outline); }
.dk-halftone { background-image: var(--dk-halftone); }

/* panels: comic frames on a grid page */
.dk-panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dk-gutter); }
.dk-panel {
  position: relative;
  background: var(--dk-white);
  color: var(--dk-ink);
  border: var(--dk-outline);
  border-radius: var(--dk-radius);
  box-shadow: var(--dk-shadow);
  padding: 2.4rem 1rem 1rem;
}

/* caption box: top-left label of a panel or section eyebrow */
.dk-caption {
  display: inline-block;
  background: var(--dk-mustard);
  color: var(--dk-ink);
  border: var(--dk-outline);
  padding: 0.15rem 0.7rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dk-caption--paper { background: var(--dk-paper); }
.dk-panel > .dk-caption { position: absolute; top: -3px; left: -3px; }

/* speech bubble with rotated-square tail; thought bubble with 3 circles */
.dk-bubble {
  position: relative;
  display: inline-block;
  max-width: 32ch;
  background: var(--dk-white);
  color: var(--dk-ink);
  border: var(--dk-outline);
  border-radius: 18px;
  padding: 0.7rem 1.1rem;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: var(--dk-shadow-sm);
  margin: 0.5rem 0 1.4rem;
}
.dk-bubble::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -14px;
  width: 22px;
  height: 22px;
  background: var(--dk-white);
  border: var(--dk-outline);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.dk-bubble--donna { background: var(--dk-lavender-tint); }
.dk-bubble--donna::after { background: var(--dk-lavender-tint); left: auto; right: 28px; }
.dk-thought { position: relative; display: inline-block; max-width: 32ch; background: var(--dk-white); color: var(--dk-ink); border: var(--dk-outline); border-radius: 999px; padding: 0.8rem 1.4rem; font-weight: 800; margin-bottom: 2.6rem; }
.dk-thought::before, .dk-thought::after { content: ""; position: absolute; background: var(--dk-white); border: var(--dk-outline-sm); border-radius: 50%; }
.dk-thought::before { width: 18px; height: 18px; left: 26px; bottom: -22px; }
.dk-thought::after { width: 11px; height: 11px; left: 16px; bottom: -36px; }

/* buttons: always enabled; only an in-flight guard may disable (rule 33) */
.dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.7rem 1.3rem;
  border: var(--dk-outline);
  border-radius: var(--dk-radius);
  background: var(--dk-indigo);
  color: var(--dk-white);
  font: 800 1rem/1.2 var(--dk-font-body);
  text-decoration: none;
  box-shadow: var(--dk-shadow-sm);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dk-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--dk-ink); }
.dk-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dk-ink); }
.dk-btn--paper { background: var(--dk-paper); color: var(--dk-ink); }
.dk-btn:focus-visible, .dk-chip:focus-visible { outline: 3px solid var(--dk-indigo); outline-offset: 3px; }

.dk-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0.15rem 0.75rem; border: var(--dk-outline-sm); border-radius: 999px; background: var(--dk-white); color: var(--dk-ink); font-weight: 600; font-size: 0.9rem; }

/* labelled placeholder for pose art that is not delivered yet (no fake art) */
.dk-pose-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 4 / 5;
  border: 3px dashed var(--dk-ink);
  border-radius: var(--dk-radius);
  background: repeating-linear-gradient(45deg, var(--dk-white), var(--dk-white) 10px, var(--dk-lavender-tint) 10px, var(--dk-lavender-tint) 20px);
  color: var(--dk-ink);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 1rem;
  margin: 0.4rem 0 0.8rem;
}
.dk-pose-placeholder--wide { aspect-ratio: 16 / 9; }

/* motion: 150ms bubble pop + earpiece glow, both off under reduced motion */
@keyframes dk-pop { from { transform: scale(0.92); opacity: 0; } }
@keyframes dk-glow { 50% { box-shadow: 0 0 0 6px rgba(165, 180, 252, 0.6); } }
.dk-bubble, .dk-thought { animation: dk-pop 0.15s ease-out; }
.dk-glow { animation: dk-glow 2.4s ease-in-out infinite; }

@media (max-width: 639px) {
  .dk-panel-grid { grid-template-columns: 1fr; }
  .dk-home, .dk-page { --dk-shadow: 4px 4px 0 var(--dk-ink); --dk-halftone: radial-gradient(rgba(20, 18, 43, 0.14) 1.2px, transparent 1.4px) 0 0 / 20px 20px; }
  .dk-pose-placeholder { aspect-ratio: 16 / 10; max-height: 220px; }
  .dk-bubble::after { left: auto; right: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-bubble, .dk-thought, .dk-glow { animation: none; }
  .dk-btn { transition: none; }
}