/* Shared UI layer: lightbox + form states.
   Every colour comes from a token each site overrides, so the same component
   reads as native on parchment, on paper and on near-black.                */

:root{
  --lb-veil:rgba(12,12,10,.92);
  --lb-fg:#F4F1EA;
  --ui-bad:#B4442F;
  --ui-good:#4A6B44;
}

/* ── lightbox ────────────────────────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,28px);
  padding:clamp(16px,4vw,56px);
  background:var(--lb-veil);backdrop-filter:blur(6px);
  animation:lb-in 200ms cubic-bezier(.22,.61,.36,1);
}
.lb[hidden]{display:none}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb__stage{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.lb__stage img{
  max-width:100%;max-height:82vh;object-fit:contain;display:block;margin:0 auto;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.lb__stage figcaption{
  color:var(--lb-fg);font-size:.8125rem;letter-spacing:.02em;text-align:center;opacity:.72;
}
.lb__close,.lb__nav{
  background:none;border:1px solid rgba(244,241,234,.28);color:var(--lb-fg);
  border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:background 180ms ease-out,border-color 180ms ease-out;
}
.lb__close{position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);
  width:40px;height:40px;font-size:1.5rem;line-height:1}
.lb__nav{width:46px;height:46px;font-size:1.75rem;line-height:1;flex:none}
.lb__close:hover,.lb__nav:hover{background:rgba(244,241,234,.14);border-color:rgba(244,241,234,.5)}
.lb__close:focus-visible,.lb__nav:focus-visible{outline:2px solid var(--lb-fg);outline-offset:2px}

/* ── form states ─────────────────────────────────────────────────────── */
[data-error]{
  display:block;min-height:1.1em;margin-top:6px;
  font-size:.6875rem;letter-spacing:.02em;color:var(--ui-bad);
}
[aria-invalid="true"]{border-color:var(--ui-bad)!important}
[data-success]{animation:ok-in 260ms cubic-bezier(.22,.61,.36,1)}
[data-success]:focus{outline:none}
@keyframes ok-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ok__mark{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor;font-size:.875rem;margin-bottom:14px;
}

@media (prefers-reduced-motion:reduce){
  .lb,[data-success]{animation:none}
}