/* Page-level CSS. Colour, type and spacing come from `_ds/nocturne/styles.css`;
   this file only covers what a page needs on top of the system — the router, the
   links, the image-slot fallback, the form status line and the cookie banner. */

body { margin: 0; background: var(--color-bg); }
  a { color: var(--color-accent); text-decoration: none; }
  a:hover { color: var(--color-accent-400); text-decoration: underline; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--color-neutral-800); border-radius: 8px; }
  ::-webkit-scrollbar-track { background: var(--color-bg); }

/* — router — */
/* Every page is a <main data-page>; the script un-hides exactly one. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-md); text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* — links that replaced canvas buttons — */
.nav-link {
  padding: 6px 0;
  font-family: var(--font-heading); font-size: 14px; font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  text-decoration: none;
}
.nav-link:hover { color: var(--color-accent); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--color-accent); }

.footer-link {
  font: inherit; font-size: 14px; text-align: left; text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.footer-link:hover { color: var(--color-accent); text-decoration: none; }
.footer-link[aria-current="page"] { color: var(--color-accent); }

.brand-link, .brand-link:hover { text-decoration: none; color: var(--color-text); }

/* — image slots — */
/* Slots are sized entirely by the frame the design puts around them. */
.slot-img { width: 100%; height: 100%; object-fit: cover; }
.slot-img.is-missing {
  /* An absent or unreadable file falls back to a flat panel in the ground
     colour rather than a broken-image glyph. */
  visibility: hidden;
}
.slot-frame-missing {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-neutral-900) 92%, var(--color-accent)),
      var(--color-neutral-900));
}

/* — form status — */
.form-status {
  font-size: 12.5px; line-height: 1.5; margin-top: 8px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.form-status[data-tone="error"] { color: var(--color-accent-300); }
.form-status:empty { display: none; }

/* — cookie banner — */
#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: clamp(12px, 2vw, 20px); display: flex; justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}