:root {
  color-scheme: dark light;
}

html {
  scroll-behavior: smooth;
}

body {
  background-image:
    linear-gradient(rgba(232, 228, 218, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 228, 218, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--wp--preset--color--bronze);
  color: var(--wp--preset--color--raven);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--wp--preset--color--old-gold);
  outline-offset: 4px;
}

a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.gsd-skip-link {
  background: var(--wp--preset--color--bone);
  color: var(--wp--preset--color--raven);
  font-family: var(--wp--preset--font-family--utility);
  font-weight: 700;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: 1rem;
  transform: translateY(-200%);
  z-index: 100000;
}

.gsd-skip-link:focus {
  transform: translateY(0);
}

.gsd-site-header {
  border-bottom: 1px solid rgba(232, 228, 218, 0.16);
}

.gsd-eyebrow {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gsd-rule {
  width: min(9rem, 30vw);
}

.gsd-hero-mark img {
  filter: drop-shadow(0 2rem 4rem rgba(0, 0, 0, 0.4));
}

.gsd-work-card {
  border-top: 1px solid rgba(232, 228, 218, 0.2);
  transition: border-color 180ms ease, transform 180ms ease;
}

.gsd-work-card:hover {
  border-color: var(--wp--preset--color--bronze);
  transform: translateY(-3px);
}

.wp-block-button__link {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.wp-block-button__link:hover {
  background: var(--wp--preset--color--bone);
  border-color: var(--wp--preset--color--bone);
  color: var(--wp--preset--color--raven);
}

.wp-block-post-featured-image img {
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 700px) {
  .gsd-site-header .wp-block-site-title { font-size: 0.9rem !important; }
  .gsd-hero-columns { flex-direction: column-reverse; }
}
