/* Example page — where every placeholder link on this template lands.
   Same shape as the 404 page in the other Artisan templates, set on one ink
   block so it reads as a piece broken off the mosaic. */
.example-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(1.25rem, 5vw, 3rem) 3vw;
}

.example-inner {
  width: min(560px, 100%);
  display: grid;
  gap: .7rem;
  padding: clamp(1.75rem, 6vw, 3rem);
  background: var(--ink);
  color: var(--chalk);
  border-top: var(--gutter) solid var(--plate-25);
}

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

.example-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--plate-15);
}

.example-page h1 {
  font-size: clamp(2rem, 8vw, 3rem);
}

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

.example-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  margin-top: 1.1rem;
}

/* Hard edges and stencil caps, like the blocks. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  box-shadow: inset 0 0 0 0 currentColor;
  transition: box-shadow .16s var(--ease), background .16s var(--ease);
}

.btn:focus-visible {
  outline-color: var(--chalk);
  outline-offset: -5px;
}

.btn-primary {
  background: var(--plate-25);
  color: var(--chalk);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: inset 0 0 0 4px var(--chalk);
}

.btn-ghost {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--chalk-dim);
  color: var(--chalk);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  box-shadow: inset 0 0 0 4px var(--chalk);
}

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