/* ===================================================================
   Cambiar website — base styles + interactions
   Palette: cream #f8f6f3 · ink #3d3935 · gold #c17f3e · navy #1a2332
   Type:    Playfair Display (display) · Inter (body) · JetBrains Mono
   =================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f8f6f3;
  color: #3d3935;
  font-family: 'Inter', sans-serif;
  font-size: 16.8px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.3px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: #c17f3e; text-decoration: none; transition: all 0.2s ease; }
a:hover { color: #3d3935; }
::selection { background-color: rgba(193,127,62,0.3); color: #3d3935; }
*:focus-visible { outline: 2px solid #c17f3e; outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: #a8a29a; }

/* --- Fixed navigation (was the {{ navStyle }} binding) --- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: all 0.3s ease;
}
.site-header.scrolled {
  background: rgba(248,246,243,0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Screens are toggled by js/site.js; hide until the router shows one. */
[data-if] { }

/* --- Scroll reveal (classes are added by js/site.js, so content is
       fully visible if JS never runs) --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1024px) {
  /* 7 nav items no longer fit inline below this width */
  [data-desktop-nav] { display: none !important; }
  [data-mobile-btn]  { display: block !important; }
}

@media (max-width: 900px) {
  [data-grid3] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-grid-contact] { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  [data-grid3],
  [data-grid2],
  [data-grid-contact] { grid-template-columns: 1fr !important; }

  [data-footer-contact] { align-items: flex-start !important; }

  /* scale down the oversized display type */
  .hero-mark { font-size: 120px !important; }
  .disp-56   { font-size: 38px  !important; }
  .disp-40   { font-size: 30px  !important; }
}

@media (max-width: 420px) {
  .hero-mark { font-size: 96px !important; }
  .disp-56   { font-size: 32px !important; }
  .disp-40   { font-size: 26px !important; }
}