/* ==========================================================================
   SOME — refinement layer
   Loaded after the Tailwind CDN build and the inline header styles, so this
   file only sharpens what is already there: type rhythm, edges, focus states
   and the small details that make the pages feel finished.
   ========================================================================== */

/* ------------------------------------------------------------ typography -- */
.font-serif,
h1, h2, h3 {
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 { letter-spacing: -0.028em; }

p { text-wrap: pretty; }

/* Long-form paragraphs read better capped near 70 characters. */
.prose p,
section p:not([class*="text-xs"]):not([class*="text-[10"]) {
  max-width: 74ch;
}
.text-center p { margin-inline: auto; }

/* Brass small-caps used for section tags — kept, but calmed down. */
.section-tag {
  letter-spacing: .12em;
  font-size: 11px;
}

/* --------------------------------------------------------------- surface -- */
/* One shared card language: a hairline, a soft lift, a warmer white. */
.shadow-card,
.shadow-glass,
.shadow-elevated {
  box-shadow:
    0 1px 2px rgba(6, 11, 21, .04),
    0 18px 40px -18px rgba(6, 11, 21, .16);
}

.rounded-3xl { border-radius: 26px; }
.rounded-2xl { border-radius: 18px; }

/* A single brass hairline instead of grey borders on light cards. */
.border-warm-200 { border-color: #eee6d5; }

/* Images get a consistent, slightly warm edge. */
img.rounded-2xl, img.rounded-3xl { background: #f5f1e7; }

/* ---------------------------------------------------------------- motion -- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
              transform .6s cubic-bezier(.22, 1, .36, 1);
}
.reveal.visible { opacity: 1; transform: none; }

a, button { transition: color .18s ease, background-color .18s ease, box-shadow .18s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- keyboard -- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid #b87a1d;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link for keyboard and screen-reader users. */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 2147483001;
  padding: 10px 18px;
  font-size: 14px; font-weight: 700;
  color: #060b15; background: #d4a853;
  border-radius: 0 0 12px 12px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* ---------------------------------------------------------- mega menu ---- */
.mega-menu a {
  display: block;
  padding: 3px 0;
  border-radius: 6px;
}
.mega-menu h4 {
  letter-spacing: .1em;
  font-size: 10.5px;
}

/* --------------------------------------------------------------- footer -- */
.footer-link {
  color: #94a3b8;
  position: relative;
}
.footer-link:hover { color: #d4a853; }

/* -------------------------------------------------------------- details -- */
::selection { background: rgba(212, 168, 83, .3); }

hr, .divider-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(184, 122, 29, .35), transparent);
}

/* Stop the hero image jumping on very small screens. */
@media (max-width: 640px) {
  .hero-wrapper { min-height: auto; }
  .hero-right img { max-height: 46vh; object-fit: cover; }
}