/* Example page — where every placeholder link on this template lands.
   Same shape as the 404 page in the other Artisan templates, drawn on the
   same sheet as the index and carrying two of its registration crosses. */
.example-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(1rem, 4vw, 2.5rem);
}

.example-inner {
  width: min(620px, 100%);
  display: grid;
  gap: .75rem;
  padding: clamp(2rem, 6vw, 3.25rem);
  border: 1px solid var(--rule-strong);
  background: var(--panel);
  /* Two crosses, drawn as four hairlines: horizontal and vertical arms at
     top-left and bottom-right, each centred 16px in from the corner. */
  background-image:
    linear-gradient(var(--amber), var(--amber)),
    linear-gradient(var(--amber), var(--amber)),
    linear-gradient(var(--amber), var(--amber)),
    linear-gradient(var(--amber), var(--amber));
  background-size: 15px 1px, 1px 15px, 15px 1px, 1px 15px;
  background-position:
    9px 16px,
    16px 9px,
    right 9px bottom 16px,
    right 16px bottom 9px;
  background-repeat: no-repeat;
}

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

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

.example-page h1 {
  font-size: clamp(1.7rem, 5.5vw, 2.4rem);
}

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

.example-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* Hairline buttons: the drawing has no heavy strokes anywhere else. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.25rem;
  border: 1px solid var(--rule-strong);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -.01em;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.btn-primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--field);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #ffc24d;
  border-color: #ffc24d;
}

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

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--amber);
  color: var(--amber);
}

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