/* Shared loud-surface primitives: the one place the brand's look is drawn. Every value comes from
   tokens.css (generated from the brand file), so a client brand swaps tokens.css and nothing else.
   Used by the site (imported into app/globals.css, layer "components") and linked by static pages
   such as /pitch. Spec: branding/brand-system.md. */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Headline treatment. For Viralest: the slab. skewY keeps every vertical stroke upright, so the text
   tilts with its slab but is never rotated or italic. A brand with a plain headline sets
   --slab-transform: none and --slab-pad: 0. */
.slab {
  display: inline-block;
  white-space: nowrap;
  padding: var(--slab-pad);
  transform: var(--slab-transform);
}
.slab > span {
  display: inline-block;
}
/* Stacked slab headline: the second line steps right and rises, like VIRAL / EST. */
.slabs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.slabs > .slab + .slab {
  margin-top: -0.06em;
}
.slab.step {
  margin-left: var(--slab-step);
}
/* Slab tones: first line paper, second line primary (the brand file's headline tones). */
.s-paper,
.s-white {
  background: var(--brand-paper);
  color: var(--brand-ink);
}
.s-primary,
.s-orange {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.s-secondary,
.s-purple {
  background: var(--brand-secondary);
  color: var(--brand-on-secondary);
}
.s-ink,
.s-black {
  background: var(--brand-ink);
  color: var(--brand-paper);
}

/* Buttons stay straight on every surface. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  transition: transform 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn > span {
  display: inline-block;
}
.btn:hover {
  transform: translateY(-3px);
}
.btn-primary,
.btn-orange {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.btn-paper,
.btn-white {
  background: var(--brand-paper);
  color: var(--brand-ink);
}
.btn-ghost {
  color: var(--fg);
  box-shadow: inset 0 0 0 2px currentColor;
}

/* One focus ring everywhere. */
:focus-visible {
  outline: var(--focus-width, 3px) solid var(--focus-ring);
  outline-offset: 3px;
}
::selection {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}

@keyframes step-up {
  from {
    transform: var(--slab-transform) translateY(14px);
    opacity: 0;
  }
  to {
    transform: var(--slab-transform) translateY(0);
    opacity: 1;
  }
}
.step-up {
  animation: step-up var(--dur-step) var(--ease-step) both;
}
.step-up.l2 {
  animation-delay: 0.12s;
}
@media (prefers-reduced-motion: reduce) {
  .step-up {
    animation: none;
  }
}