/* Pretty Disobedient — portable starting tokens, not a complete site stylesheet. */
:root {
  --bc-paper: #ece9e1;
  --bc-ink: #171717;
  --bc-pink: #ff48a6;
  --bc-paper-edge: #ccc8c0;
  --bc-font-display: "Anton", Impact, "Arial Narrow", "Helvetica Neue", sans-serif;
  --bc-font-body: Arial, Helvetica, sans-serif;
  --bc-font-label: "Courier New", Courier, monospace;
  --bc-space-1: 0.25rem;
  --bc-space-2: 0.5rem;
  --bc-space-3: 0.75rem;
  --bc-space-4: 1rem;
  --bc-space-6: 1.5rem;
  --bc-space-8: 2rem;
  --bc-space-12: 3rem;
  --bc-space-16: 4rem;
  --bc-space-24: 6rem;
  --bc-content-width: 80rem;
  --bc-page-gutter: clamp(1.25rem, 4vw, 4rem);
  --bc-display-size: clamp(3.5rem, 10vw, 7.5rem);
  --bc-body-size: 1rem;
  --bc-label-size: 0.75rem;
  --bc-motion-fast: 160ms;
}

.bc-display {
  font-family: var(--bc-font-display);
  font-size: var(--bc-display-size);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.bc-label {
  font-family: var(--bc-font-label);
  font-size: var(--bc-label-size);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Keep rotations on short decorative headline strips, never entire content areas. */
.bc-cutout {
  display: inline-block;
  max-width: 100%;
  padding: 0.04em 0.12em;
  color: var(--bc-paper);
  background: var(--bc-ink);
  transform: rotate(-2deg);
}

.bc-cutout--pink {
  color: var(--bc-ink);
  background: var(--bc-pink);
  transform: rotate(1.5deg);
}

/* Two-color focus ring remains visible on paper, pink, and ink surfaces. */
.bc-focus:focus-visible {
  outline: 2px solid var(--bc-paper);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--bc-ink);
}

@media (prefers-reduced-motion: reduce) {
  :root { --bc-motion-fast: 0ms; }
}