/* ============================================================
   RANCHO LA VEGA — Heritage Gamefowl
   Visual system: dark walnut + aged brass + parchment
   ============================================================ */

:root {
  /* Wood */
  --wood-000: #0e0905;
  --wood-100: #1a1009;
  --wood-200: #241710;
  --wood-300: #33211492;
  --wood-plank: #2c1c11;
  --wood-edge: #0c0703;

  /* Brass / gold */
  --gold-100: #f7ecca;
  --gold-200: #ecd79a;
  --gold-300: #d9b860;
  --gold-400: #c39a3e;
  --gold-500: #a87e2c;
  --gold-600: #7e5c1f;
  --gold-700: #553c14;
  --gold-shadow: #2a1c08;

  /* Parchment */
  --parch-100: #f3e8cd;
  --parch-200: #e6d4ac;
  --parch-300: #d4bd8a;
  --parch-ink: #3a2a14;
  --parch-ink-soft: #6a5436;

  /* Text */
  --cream: #f2e7cf;
  --cream-soft: #cdb98f;
  --cream-dim: #9a865f;

  /* Accent */
  --comb-red: #9e2b1e;

  --serif-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif-body: "EB Garamond", Georgia, "Times New Roman", serif;

  --shadow-card: 0 18px 40px -18px rgba(0,0,0,0.85);
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif-body);
  color: var(--cream);
  background: var(--wood-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* ---------- Wood surfaces ---------- */
.wood {
  position: relative;
  background-color: var(--wood-200);
  background-image:
    /* fine grain streaks */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.18) 0px, rgba(0,0,0,0) 2px, rgba(120,80,40,0.05) 5px, rgba(0,0,0,0) 9px),
    /* plank seams */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0px, rgba(0,0,0,0) 118px,
      rgba(0,0,0,0.55) 119px, rgba(90,60,30,0.25) 121px, rgba(0,0,0,0) 123px),
    /* tonal variation */
    linear-gradient(100deg, #2a1a0f 0%, #1d120a 30%, #2e1d11 55%, #190f08 80%, #261609 100%);
}
.wood::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(140% 90% at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}
.wood-dark { background-color: var(--wood-100); }
.wood-dark::after { background: radial-gradient(140% 120% at 50% 50%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.6) 100%); }

/* ---------- Gold typographic treatments ---------- */
.gold-text {
  background: linear-gradient(178deg, #fbf1d0 0%, #ecd393 30%, #d2ad55 52%, #aa8534 70%, #d8b75f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 1px rgba(0,0,0,0.35);
  filter: drop-shadow(0 1px 0 rgba(255,240,200,0.12));
}

.eyebrow {
  font-family: var(--serif-display);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gold-300);
}

/* Section heading with flourish rules */
.section-head {
  text-align: center;
  margin: 0 auto 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  max-width: 820px;
}
.section-head h2 {
  font-family: var(--serif-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  margin: 0;
  white-space: nowrap;
}
.flourish {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-600), var(--gold-300));
  position: relative;
  max-width: 220px;
}
.flourish.right { background: linear-gradient(270deg, transparent, var(--gold-600), var(--gold-300)); }
.flourish::after {
  content: "";
  position: absolute; top: 50%; right: -1px; transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px; background: var(--gold-300);
  box-shadow: 0 0 6px rgba(217,184,96,0.6);
}
.flourish.right::after { right: auto; left: -1px; }

/* ---------- Ornate gold frame ---------- */
.gold-frame {
  position: relative;
  border: 1px solid var(--gold-600);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.6),
    inset 0 0 0 3px rgba(217,184,96,0.18);
}
.gold-frame::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid rgba(217,184,96,0.4);
  pointer-events: none;
}
/* corner studs */
.corners > i {
  position: absolute; width: 12px; height: 12px; z-index: 3;
  background: radial-gradient(circle at 35% 30%, var(--gold-100), var(--gold-400) 45%, var(--gold-700) 100%);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.7), inset 0 0 2px rgba(0,0,0,0.4);
}
.corners > i.tl { top: 8px; left: 8px; }
.corners > i.tr { top: 8px; right: 8px; }
.corners > i.bl { bottom: 8px; left: 8px; }
.corners > i.br { bottom: 8px; right: 8px; }

/* ---------- Brass nameplate ---------- */
.nameplate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.5em 1.4em;
  font-family: var(--serif-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: #2a1d09;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #f7e6b0 0%, #d9b65f 18%, #b6913f 50%, #8a6a2c 82%, #c9a44c 100%);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.6),
    inset 0 1px 1px rgba(255,248,220,0.7),
    inset 0 -2px 3px rgba(80,55,20,0.6);
  text-shadow: 0 1px 0 rgba(255,245,215,0.55);
  border: 1px solid #6e5320;
  position: relative;
}
.nameplate::before, .nameplate::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4d2, #7a5c22 80%);
  box-shadow: inset 0 0 1px rgba(0,0,0,0.6);
}

/* ---------- Parchment ---------- */
.parchment {
  position: relative;
  background-color: var(--parch-200);
  background-image:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.35), rgba(0,0,0,0) 50%),
    radial-gradient(120% 100% at 100% 100%, rgba(120,90,40,0.28), rgba(0,0,0,0) 55%),
    repeating-linear-gradient(115deg, rgba(150,110,55,0.05) 0 6px, rgba(0,0,0,0) 6px 14px);
  color: var(--parch-ink);
  border-radius: 4px;
  box-shadow:
    0 14px 34px -16px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(120,85,40,0.4),
    inset 0 0 30px rgba(120,85,40,0.18);
}
.parchment::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 18px rgba(90,60,25,0.35);
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn-gold {
  font-family: var(--serif-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #2a1d09;
  padding: 0.95em 2em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background:
    linear-gradient(180deg, #faecb6 0%, #dcb55e 22%, #b88f3c 55%, #8c6a2c 100%);
  box-shadow:
    0 6px 16px -6px rgba(0,0,0,0.8),
    inset 0 1px 1px rgba(255,248,220,0.8),
    inset 0 -2px 4px rgba(70,48,16,0.6);
  text-shadow: 0 1px 0 rgba(255,245,215,0.5);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid #6e5320;
}
.btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.85), inset 0 1px 1px rgba(255,248,220,0.9), inset 0 -2px 4px rgba(70,48,16,0.6);
}
.btn-gold:active { transform: translateY(0); }
.btn-gold::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-gold:hover::after { left: 130%; }

.btn-ghost {
  font-family: var(--serif-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gold-200);
  background: rgba(20,12,6,0.5);
  border: 1px solid var(--gold-600);
  padding: 0.8em 1.6em;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-ghost:hover { background: rgba(40,26,12,0.8); color: var(--gold-100); border-color: var(--gold-400); }

/* ---------- Decorative divider bar (riveted brass rail) ---------- */
.brass-rail {
  height: 14px;
  background:
    linear-gradient(180deg, #c9a44c 0%, #8a6a2c 45%, #5a4119 55%, #b69440 100%);
  box-shadow: inset 0 1px 1px rgba(255,245,210,0.5), inset 0 -2px 3px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.5);
  position: relative;
  border-top: 1px solid #6e5320;
  border-bottom: 1px solid #3a2a10;
}
.brass-rail::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.35) 0 1px, transparent 1px 28px);
  opacity: 0.5;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { position: relative; }
.section-pad { padding: clamp(3rem, 7vw, 5.5rem) 0; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   EMBLEM
   ============================================================ */
.emblem { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; user-select: none; }
.emblem-arch {
  font-family: var(--serif-display);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  font-size: 0.9rem;
}
.emblem-medal {
  position: relative;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, #3a2613 0%, #1c1108 70%, #120a04 100%);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.8), inset 0 0 14px rgba(0,0,0,0.7);
}
.emblem-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 220deg, #7e5c1f, #f7ecca, #c39a3e, #7e5c1f, #ecd79a, #8a6a2c, #7e5c1f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
.emblem-banner {
  position: relative;
  margin-top: -6px;
  padding: 0.3em 1.6em;
  background: linear-gradient(180deg, #c9a44c, #8a6a2c 60%, #5a4119);
  box-shadow: inset 0 1px 1px rgba(255,245,210,0.5), 0 3px 8px -3px rgba(0,0,0,0.7);
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}
.emblem-banner-text {
  font-family: var(--serif-display);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-size: 0.78rem;
}