/* ==========================================================================
   COMPONENTS · ERROR PAGE — the editorial system page (404 / 422 / 500): the
   status set as a plate in the catalogue — a hairline-framed figure presenting
   a big mono code under a "No." label, so a missing page reads as a missing
   offprint, not a crash. The code stays ink, never the rubric: a system fault
   is premium-by-restraint, never alarmist. The --notice variant swaps the code
   plate for a rubric kicker and an email-capture row (maintenance / soon).
   ========================================================================== */

.op-error {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  text-align: center;
  max-inline-size: var(--measure-narrow);
  margin-inline: auto;
  padding-block: var(--space-2xl);
}

/* The plate: a figure-style frame (hairline + faint inner keyline) lifted off
   the ground, presenting the status code as the catalogue entry's number */
.op-error__plate {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-3xs);
  padding: var(--space-lg) var(--space-2xl);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
}
.op-error__plate::after {
  content: "";
  position: absolute;
  inset: var(--space-2xs);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  pointer-events: none;
}

/* The "No." / "Fig." furniture label above the numeral */
.op-error__label {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The big mono code — tabular, ink, never the rubric */
.op-error__code {
  font-family: var(--font-data);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

.op-error__title {
  font-family: var(--font-reading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.op-error__body {
  font-family: var(--font-furniture);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-inline-size: 46ch;
}

.op-error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
}

/* — Notice: maintenance / coming-soon. No code plate — a rubric kicker leads,
   and an email-capture row stands where the actions would be. — */
.op-error__capture {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  gap: var(--space-xs);
  inline-size: 100%;
  max-inline-size: 30rem;
  margin-inline: auto;
}
.op-error__capture .op-field {
  flex: 1 1 16rem;
  text-align: start;
}
.op-error--notice .op-error__title { font-size: var(--text-xl); }