/* Site-specific glue on top of ds/nocturne.css — kept to what the design's page
   helmets and the README's behaviour notes specify, plus the form success states and
   the documented mobile minimum (README: "The sensible minimum"). */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 59px; } /* anchor targets clear the sticky nav (~59px) */
body { margin: 0; }
a { color: var(--color-accent-300); }
a:hover { color: var(--color-accent-200); }

/* Honeypot: visually removed, still in the DOM for bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Form success state — the handler 303s back to the page with the message's fragment,
   and :target reveals it. No JavaScript. */
.form-ok {
  display: none;
  font-size: 13px; color: var(--color-accent-200);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3);
  max-width: 440px;
}
.form-ok:target { display: block; }

/* Screenshots keep legibility on small screens by scrolling, not shrinking (README). */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  h1 { font-size: 40px !important; }
  .elev-md[style*="overflow:hidden"], .elev-lg[style*="overflow:hidden"] {
    overflow-x: auto !important;
  }
  .elev-md[style*="overflow:hidden"] img, .elev-lg[style*="overflow:hidden"] img {
    min-width: 700px;
  }
}