:root {
  color-scheme: dark;              
  --c-ink-faint: #868d74;          
}

html {
  scroll-padding-top: calc(var(--nav-h) + var(--sp-5));
  scrollbar-color: var(--c-border) var(--c-bg);
  scrollbar-width: thin;
}

h1, h2, h3,
.hero-heading, .page-head__title, .section-head__title, .cta-title,
.about-grid__heading, .featured-post__title, .contact-info__title { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-ink);
  caret-color: var(--c-ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}

.project-card__link:focus-visible { border-radius: var(--radius-lg); }

.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 78% 38%, rgba(217, 139, 58, .14), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > :not([data-reveal])                { animation: hero-rise .7s var(--ease) backwards; }
  .hero-copy > :not([data-reveal]):nth-child(2)   { animation-delay: .08s; }
  .hero-copy > :not([data-reveal]):nth-child(3)   { animation-delay: .16s; }
  .hero-copy > :not([data-reveal]):nth-child(4)   { animation-delay: .24s; }
  .hero-copy > :not([data-reveal]):nth-child(5)   { animation-delay: .32s; }
  .hero-building:not([data-reveal])               { animation: hero-rise .8s var(--ease) .25s backwards; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.service-card, .service-item, .project-card, .post-card,
.principle, .feature-block, .contact-form {
  box-shadow: inset 0 1px 0 rgba(254, 250, 224, .04);
}
.building-card  { box-shadow: inset 0 1px 0 rgba(254, 250, 224, .05), var(--shadow-lg); }
.monogram-card  { box-shadow: inset 0 1px 0 rgba(254, 250, 224, .05), var(--shadow-md); }
.featured-post  { box-shadow: inset 0 1px 0 rgba(254, 250, 224, .05), var(--shadow-md); }

.service-card, .service-item, .project-card {
  transition-property: border-color, background-color, transform, box-shadow;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease);
}
@media (hover: hover) {
  .service-card:hover, .service-item:hover, .project-card:hover {
    box-shadow: inset 0 1px 0 rgba(254, 250, 224, .06), var(--shadow-md);
  }
}

.btn-t { transition-property: background-color, color, border-color, transform, box-shadow; }
.btn-t--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px rgba(217, 139, 58, .2);
}
.btn-t--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 24px rgba(217, 139, 58, .3);
}

.btn-t--primary:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--focus-ring);
}

.nav-drawer {
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.nav-drawer.is-open {
  visibility: visible;
  transition: transform var(--dur-base) var(--ease), visibility 0s;
}


/* ----------  project thumbnails ----------
   project cards are text only. Put zthis as the FIRST child inside .project-card__link:
     <div class="project-card__media"><img src="..." alt="" loading="lazy"></div>
   Nothing changes until you add that element. */

.project-card__media {
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-2);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: var(--c-surface-2);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
@media (hover: hover) {
  .project-card:hover .project-card__media img { transform: scale(1.03); }
}