/* Novolti override — tints the Industry ground light blue.
   Accent ramp, type, spacing and radius stay exactly as the design system defines them. */
:root {
  --color-bg: oklch(0.952 0.018 250);
  --color-surface: oklch(0.915 0.026 250);
}

/* .duotone clips its accent overlay with overflow:hidden, which makes it a
   scroll container. A full-bleed duotone figure then swallows touch drags on
   mobile browsers and the page will not scroll. `clip` clips without creating
   one; `hidden` stays first as the fallback for Safari < 16. */
.duotone { overflow: hidden; overflow: clip; }

/* Skip link — hidden until keyboard-focused, then above the fixed header (z-index 60). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-sm, 8px);
  background: var(--color-accent-900);
  color: var(--color-bg);
  font-size: 14px;
  text-decoration: none;
}

/* Touch targets. Nav and footer links were 22-39px tall; padding grows the hit
   area without touching type scale or colour, so the design is unchanged. */
header a,
header button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
footer a {
  padding-block: 8px;
}

/* --color-accent (#5980a6) only reached 3.6:1 against the page ground, and it is
   used both as link text and as the primary button fill — so it failed in both
   directions. #416180 is accent-700 from the same ramp, so the hue is unchanged
   but both pairings now clear 4.5:1. */
:root { --color-accent: #416180; }

/* Table headers shipped at 60% of the text token (4.16:1). */
.table th { color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* Standalone links (nav rows, card links, list items) get a taller hit area.
   Links inside a paragraph are excluded: they are exempt from the target-size
   rule and padding there would disturb the text block. */
main a:not(p a):not(.skip-link) { padding-block: 6px; }

/* ── Motion, site-wide ──────────────────────────────────────────────
   The stock CSS easings are too weak to read as intentional. Two curves:
   --ease-travel keeps speed through the middle, for things crossing the
   screen; --ease-arrive is exponential, for things landing. Declared here
   so every page and every runtime component shares one motion language
   rather than each re-inventing a bezier. */
:root {
  --ease-travel: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-arrive: cubic-bezier(0.16, 1, 0.30, 1);
}

/* Every pressable thing answers the finger. 150ms sits under the threshold
   where feedback starts to read as latency, and the scale is small enough
   to feel like a button and not a toy. */
.btn, header button, button[type="submit"] {
  transition: transform 150ms var(--ease-travel), background-color 200ms ease,
              border-color 200ms ease, color 200ms ease;
}
.btn:active, header button:active, button[type="submit"]:active { transform: scale(0.97); }

/* Hover belongs to real pointers. On a touch screen these fire on tap and
   then stick, which is how a tapped card ends up looking selected. */
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, header button:active, button[type="submit"]:active { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* In-page anchors glide rather than jump, and stop clear of the fixed
   header instead of hiding the heading underneath it. Pure CSS, so it
   also covers links the runtime renders. Reduced motion is handled by
   the scroll-behavior override above. */
html { scroll-behavior: smooth; }
:target, [id] { scroll-margin-top: 92px; }

/* ── Back to top ────────────────────────────────────────────────────
   A blueprint object like everything else: square, hairline, four
   registration marks. It fades and rises 6px rather than scaling from
   nothing — things do not appear out of thin air. */
.back-to-top {
  position: fixed;
  right: clamp(18px, 4vw, 32px);
  bottom: calc(clamp(18px, 4vw, 32px) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-arrive), transform 200ms var(--ease-arrive),
              border-color 200ms ease;
}
.back-to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* The icon and the four registration marks are decoration; without this the
   click resolves to a child and the hit target has a hole in the middle. */
.back-to-top > * { pointer-events: none; }
.back-to-top:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover { border-color: color-mix(in srgb, var(--color-accent) 70%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transform: none; transition: opacity 200ms ease; }
  .back-to-top:active { transform: none; }
}

/* ── Blueprint link cards ───────────────────────────────────────────
   These were filling with accent on hover, which the design system
   forbids — a blueprint object is a drawing, not a surface to paint.
   The hairline strengthens instead: the card acknowledges the pointer
   without pretending to be a button. */
a.blueprint:not(.btn) { transition: border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  a.blueprint:not(.btn):hover { border-color: color-mix(in srgb, var(--color-accent) 70%, transparent); }
}