/* ============================================================
   block: button — letterpress / ink-stamp
   No gradients. Sharp corners. A satisfying offset shadow on
   hover, like a stamp pressing into paper.
   ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  border-radius: 0;
  transition: transform .18s ease, box-shadow .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease;
  background-image: none;       /* override global a underline gfx */
}
.button:hover { text-decoration: none; }

/* Tiny corner ticks for that ticket-stub feel */
.button::before, .button::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
.button::before {
  top: 3px; left: 3px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  opacity: .55;
}
.button::after {
  bottom: 3px; right: 3px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: .55;
}

/* Primary — turf green, the "valider" stamp */
.button--primary {
  background: var(--turf);
  color: var(--paper);
  border-color: var(--turf-deep);
  box-shadow: 4px 4px 0 0 var(--ink);
}
.button--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--rouge-deep);
  background: var(--turf-deep);
  color: var(--brass-bright);
}
.button--primary:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 0 var(--ink);
}

/* Ghost — outlined, paper background */
.button--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.button--ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Dark — full ink */
.button--dark {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.button--dark:hover {
  background: var(--rouge-deep);
  border-color: var(--rouge-deep);
  color: var(--paper);
}

/* Rouge — alert / hot */
.button--rouge {
  background: var(--rouge);
  color: var(--paper);
  border-color: var(--rouge-deep);
  box-shadow: 4px 4px 0 0 var(--ink);
}
.button--rouge:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--turf-deep);
  background: var(--rouge-deep);
}

/* Sizes */
.button--small {
  padding: 9px 16px;
  font-size: .8rem;
  letter-spacing: .12em;
}
.button--small.button--primary { box-shadow: 3px 3px 0 0 var(--ink); }
.button--small.button--primary:hover { box-shadow: 5px 5px 0 0 var(--rouge-deep); }

.button--block { width: 100%; }

/* Disable shimmery underline globally inherited */
.button:hover { background-size: auto; }

@media (max-width: 480px) {
  .button { padding: 11px 18px; font-size: .85rem; letter-spacing: .1em; gap: 8px; }
  .button--small { padding: 8px 14px; font-size: .76rem; }
}