/* Layout the prototype did in JavaScript. Here it is plain CSS, so the page reads
   correctly before (or without) site.js. */
[data-w] { display: inline-block; }

@media (min-width: 900px) {
  [data-nav-links] { display: flex !important; }
}
@media (max-width: 899px) {
  [data-cols] { grid-template-columns: minmax(0, 1fr) !important; }
  #work article { position: static !important; }
}

/* Each page's `a:hover { color: accent-600 }` outranks `.btn-primary` and turned the label
   the same wine as the hovered button — the text vanished. Buttons keep their own colours. */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active { color: #ffffff !important; }
a.btn-secondary:hover { color: var(--color-text); }
.btn-primary:hover { background: var(--color-accent-600); }

[data-faq]:hover,
[data-faq][open] { background: var(--color-accent-100) !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Start states for motion — only once the boot script has added .js and only when the
   visitor allows motion. If site.js never loads, the boot script drops .js after 3s. */
/* Desktop with a mouse only: on phones the content shows at once, which is what the
   first-paint metrics (and a doctor on 4G) care about. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .js [data-reveal] {
    opacity: 0; transform: translate3d(0, 26px, 0);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-w] {
    opacity: 0; transform: translate3d(0, 0.42em, 0) rotate(2.5deg);
    transition: opacity .62s ease, transform .82s cubic-bezier(.2,.7,.3,1);
  }
  .js [data-w].is-in { opacity: 1; transform: none; }
  .wipe-in [data-wipe] { opacity: 1 !important; transform: none !important; }
}