/* Cellarium Consulting — shared base styles (complement to Tailwind CDN) */

html { background: #FAF6EE; }
body { font-family: 'Inter', system-ui, sans-serif; color: #14151A; -webkit-font-smoothing: antialiased; }

.display { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.overline { font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; font-weight: 700; color: #8B6328; }

.rule { height: 1px; background: linear-gradient(to right, transparent, rgba(20,21,26,0.15), transparent); }

.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

.nav-wrap {
  background: rgba(250, 246, 238, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20,21,26,0.08);
}
.nav-scrolled { background: rgba(250, 246, 238, 0.96) !important; }

.card {
  background: #FDFBF6;
  border: 1px solid rgba(20,21,26,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(20,21,26,0.25);
  border-color: rgba(184,137,74,0.4);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(20,21,26,0.06);
  font-size: 11px; font-weight: 600; color: #1F2128; letter-spacing: 0.04em;
}

.btn-primary {
  background: #14151A; color: #FAF6EE;
  padding: 12px 22px; border-radius: 4px;
  font-weight: 600; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.2s ease;
}
.btn-primary:hover { background: #8B6328; }

.btn-ghost {
  color: #14151A;
  padding: 12px 22px; border-radius: 4px;
  font-weight: 600; border: 1px solid rgba(20,21,26,0.25);
  display: inline-flex; align-items: center; gap: 10px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { color: #8B6328; border-color: #8B6328; }

.link-arrow {
  color: #14151A; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(20,21,26,0.2);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.link-arrow:hover { color: #8B6328; border-color: #8B6328; }

/* Mega-menu dropdown — positions to the fixed #nav (full width), not the button */
.has-drop { position: static; }
.drop {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #FDFBF6;
  border-top: 1px solid rgba(20,21,26,0.08);
  box-shadow: 0 20px 40px -20px rgba(20,21,26,0.2);
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.has-drop:hover .drop,
.has-drop:focus-within .drop,
.drop.drop-open {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
#nav > div { position: relative; }

.hero-bg {
  background:
    radial-gradient(1200px 500px at 85% 10%, rgba(184,137,74,0.12), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(20,21,26,0.06), transparent 60%),
    linear-gradient(180deg, #FDFBF6 0%, #FAF6EE 100%);
}

.mono-grid {
  background-image:
    linear-gradient(rgba(20,21,26,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,21,26,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Minimise partial-include FOUC: reserve vertical space for nav */
body { padding-top: 0; }
[data-include="nav"]:empty { display: block; height: 80px; background: rgba(250,246,238,0.85); }

/* Wordmark — option 2: serif wordmark with gold underline */
.wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: #14151A;
  padding-bottom: 6px;
  border-bottom: 1px solid #B8894A;
  display: inline-block;
  line-height: 1;
}
/* Legacy .dot span kept as no-op so old markup still renders cleanly if it survives */
.wordmark .dot { display: none; }

/* Form elements (used on contact page) */
.form-input {
  width: 100%;
  background: #FDFBF6;
  border: 1px solid rgba(20,21,26,0.18);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 15px;
  color: #14151A;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus { outline: none; border-color: #8B6328; box-shadow: 0 0 0 3px rgba(184,137,74,0.18); }
.form-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2E3038; margin-bottom: 6px; display: block; }