/* Example page — where every placeholder link on this template lands.
   Same shape as the 404 page in the other Artisan templates, printed on the
   same flood coat as the poster, with the headline knocked out of it. */
.example-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(2rem, 8vw, 4rem) 5vw;
}

.example-inner {
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: .75rem;
  text-align: center;
}

.example-mark {
  width: 44px;
  height: 44px;
  margin-bottom: .4rem;
  color: var(--flare);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.example-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stock-dim);
}

.example-page h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .9;
  font-size: clamp(2.4rem, 11vw, 4rem);
  text-shadow: 3px 3px 0 var(--flare);
}

.example-lede {
  max-width: 46ch;
  color: var(--stock-dim);
  font-size: .96rem;
  line-height: 1.55;
}

.example-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.1rem;
}

/* Same knocked-out billing block as the poster's link list. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 1.5rem;
  border: 2px solid var(--stock);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  text-transform: uppercase;
  transition: background .18s var(--ease), color .18s var(--ease), translate .18s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  translate: 0 -2px;
}

.btn-primary {
  background: var(--flare);
  border-color: var(--flare);
  color: var(--ink);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--stock);
  border-color: var(--stock);
}

.btn-ghost {
  background: transparent;
  color: var(--stock);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--stock);
  color: var(--flood);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:hover,
  .btn:focus-visible {
    translate: none;
  }
}