/* 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 paper as the contact sheet and lying on the same table, so following
   a link never leaves the darkroom. */
.example-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(1.5rem, 6vw, 3.5rem) clamp(.75rem, 4vw, 2rem);
}

.example-inner {
  width: min(560px, 100%);
  display: grid;
  gap: .75rem;
  padding: clamp(1.75rem, 6vw, 2.75rem);
  background: var(--sheet);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .28) inset,
    0 24px 60px rgba(0, 0, 0, .55),
    0 3px 10px rgba(0, 0, 0, .4);
  rotate: -.35deg;
}

.example-mark {
  width: 38px;
  height: 38px;
  margin-bottom: .35rem;
  color: var(--grease);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.example-eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--edge);
}

.example-page h1 {
  font-size: clamp(1.8rem, 6vw, 2.5rem);
}

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

.example-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

/* Square, like the frames. Nothing on this sheet is rounded. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.3rem;
  border: 1px solid var(--frame);
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: -.01em;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.btn-primary {
  background: var(--frame);
  color: var(--sheet);
}

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

.btn-ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--frame);
  background: rgba(23, 23, 26, .06);
}

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