/* ─────────────────────────────────────────────────────────────────────────
   enhance.css — additive polish layer over the shipped build.
   Loaded AFTER main-*.css so these rules win on ties. The original build
   files are left byte-for-byte untouched; deleting this <link> fully reverts.
   Adds: paper grain, edge vignette, symmetric registration ticks, brand
   text-selection, sharper focus, richer portrait framing, wordmark micro-hover.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --grain-opacity: .045;
}

/* Warm the paper very slightly with a top-lit gradient so the flat fill
   reads as a physical sheet rather than a screen fill. */
.error-page {
  background-image:
    radial-gradient(120% 80% at 22% -10%, var(--paper-bright) 0%, transparent 55%);
}

/* Fine film grain over everything. Static (no animation) so it costs nothing
   after first paint and needs no reduced-motion carve-out. Sits above the
   paper but below all content via a fixed, non-interactive layer. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Soft edge vignette — pulls the eye toward the centre column and the
   portrait without any visible band. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(130% 120% at 50% 42%,
              transparent 60%,
              color-mix(in srgb, var(--ink) 9%, transparent) 100%);
}

/* Keep real content above the grain/vignette layers. */
.site-header, .copy, .portrait-zone, .site-footer { position: relative; z-index: 2; }

/* Registration ticks in the remaining three corners, mirroring the shipped
   top-left tick, so the frame reads as a deliberate print crop. */
.error-page > .site-header::before,
.error-page > .site-footer::after {
  content: "";
  position: absolute;
  z-index: 20;
  width: 14px;
  height: 1px;
  background: var(--ink);
  pointer-events: none;
}
.error-page > .site-header::before { top: 30px; right: 0; }   /* top-right */
.error-page > .site-footer::after  { bottom: 30px; left: 0; }  /* bottom-left */

/* Brand-coloured text selection instead of the OS default blue. */
::selection { background: var(--cobalt); color: var(--paper-bright); }

/* A single, consistent focus ring everywhere keyboard users land. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Wordmark: the accent dot lifts and the mark tightens on hover/focus —
   a small, on-brand acknowledgement of interactivity. */
.wordmark { transition: letter-spacing .3s var(--ease-out); }
.wordmark:hover { letter-spacing: -.045em; }
.wordmark .wordmark-dot {
  display: inline-block;
  transition: transform .3s var(--ease-snap);
}
.wordmark:hover .wordmark-dot { transform: translateY(-3px); }

/* Give the portrait panel real depth: a fine inset edge and a grounding
   shadow so the subject sits in the sheet instead of floating on it. */
.portrait {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
    0 24px 60px -30px color-mix(in srgb, var(--ink) 55%, transparent);
}

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