/* ====== VARIABLES ====== */
:root {
  --paper:      #F5EDD8;
  --paper-dk:   #EDE0C4;
  --cream:      #FAF5EC;
  --brown-dk:   #2C1A0E;
  --brown-mid:  #5C3A1E;
  --brown-lt:   #8B5E3C;
  --rust:       #9B4518;
  --gold:       #C9922A;
  --gold-lt:    #E8B84B;
  --teal:       #2A6B6B;
  --teal-lt:    #3D8A8A;
  --text:       #2C1A0E;
  --muted:      #7A6248;
  --border:     #C9B08A;
  --font-display: 'Special Elite', cursive;
  --font-head:  'Playfair Display', serif;
  --font-body:  'Lato', sans-serif;
}

/* ====== BASE ====== */
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--cream); color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.7; }
h1, h2, h3, h4 { font-family: var(--font-head); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ====== TYPOGRAPHY ====== */
.section-ornament { font-size: 0.7rem; color: var(--gold); letter-spacing: 0.4em; margin-bottom: 0.5rem; }
.section-label { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.15em; color: var(--rust); margin-bottom: 0.5rem; display: block; }
.section-title { font-family: var(--font-head); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; font-weight: 700; color: var(--brown-dk); margin-bottom: 1rem; }
.section-title em { color: var(--rust); font-style: italic; }
.section-sub { color: var(--muted); font-size: 0.95rem; max-width: 540px; margin: 0 auto; }
.about-lead { font-size: 1.08rem; color: var(--brown-mid); font-weight: 400; line-height: 1.75; margin-bottom: 1rem; font-family: var(--font-head); font-style: italic; }
.about-body { color: var(--muted); font-size: 0.92rem; line-height: 1.85; margin-bottom: 0.9rem; }

/* ====== BUTTONS ====== */
.btn-primary-custom { background: var(--rust); color: var(--paper); font-family: var(--font-display); font-size: 0.88rem; letter-spacing: 0.1em; padding: 0.85rem 2rem; border: 2px solid var(--rust); border-radius: 0; transition: background 0.2s, transform 0.15s; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-primary-custom:hover { background: var(--brown-mid); border-color: var(--brown-mid); transform: translateY(-2px); color: var(--paper); }
.btn-outline-custom { background: transparent; color: var(--paper); font-family: var(--font-display); font-size: 0.88rem; letter-spacing: 0.1em; padding: 0.85rem 2rem; border: 2px solid rgba(245,237,216,0.5); border-radius: 0; transition: border-color 0.2s, color 0.2s; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-outline-custom:hover { border-color: var(--gold-lt); color: var(--gold-lt); }

/* ====== NAVBAR ====== */
#navbar { position: fixed; top: 0; width: 100%; z-index: 1000; background: rgba(44,26,14,0.0); border-bottom: 1px solid transparent; transition: background 0.4s, border-color 0.4s, padding 0.3s; padding: 1rem 0; }
#navbar.scrolled { background: rgba(44,26,14,0.97); border-bottom-color: var(--gold); padding: 0.5rem 0; }
.brand-wrap { display: flex; flex-direction: column; line-height: 1.1; }
.brand-wild { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--gold-lt); }
.brand-main { font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; color: var(--paper); }
.brand-loc { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,237,216,0.5); }
.nav-link { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--paper) !important; padding: 0.3rem 0.8rem !important; position: relative; transition: color 0.2s; }
.nav-link::after { content: ''; position: absolute; bottom: -1px; left: 0.8rem; right: 0.8rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.nav-link:hover { color: var(--gold-lt) !important; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-cta { background: var(--rust) !important; color: var(--paper) !important; padding: 0.35rem 1rem !important; font-weight: 700; transition: background 0.2s !important; }
.nav-cta:hover { background: var(--brown-mid) !important; color: var(--paper) !important; }
.nav-cta::after { display: none; }
.navbar-toggler { border-color: var(--gold); }
.navbar-toggler-icon { filter: invert(1); }

/* ====== HERO ====== */
#hero { min-height: 100vh; background: url('../images/hero.jpg') center center / cover no-repeat; position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(44,26,14,0.7) 0%, rgba(44,26,14,0.6) 50%, rgba(44,26,14,0.85) 100%); }
.hero-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; opacity: 0.6; }
.hero-content { position: relative; z-index: 1; padding: 120px 0 80px; }
.hero-stamp { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(201,146,42,0.6); margin-bottom: 1.5rem; }
.hero-title { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-bottom: 1.5rem; }
.hero-title-top { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.2rem); color: var(--gold-lt); letter-spacing: 0.08em; }
.hero-title-main { font-family: var(--font-head); font-size: clamp(4rem, 11vw, 8.5rem); line-height: 0.92; font-weight: 800; color: var(--paper); letter-spacing: 0.02em; text-align: center; }
.hero-sub { font-size: 1rem; color: rgba(245,237,216,0.78); max-width: 580px; margin: 0 auto 2.5rem; line-height: 1.8; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.hero-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0 1rem; color: rgba(201,146,42,0.5); font-size: 0.5rem; }
.hero-divider span { display: inline-block; width: 60px; height: 1px; background: rgba(201,146,42,0.4); }
.hero-address { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.1em; color: rgba(245,237,216,0.55); }
.hero-address i { color: var(--gold); margin-right: 0.3rem; }
.hero-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: rgba(201,146,42,0.4); font-size: 1rem; animation: bounce 2s ease infinite; z-index: 1; }
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* ====== TICKER ====== */
.ticker-strip { background: var(--brown-dk); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: 0.6rem 0; overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; animation: ticker 32s linear infinite; }
.ticker-item { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--gold-lt); padding: 0 1.8rem; }
.ticker-sep { color: var(--rust); align-self: center; font-size: 0.6rem; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ====== SECTIONS ====== */
section { padding: 6rem 0; }
#about { background: var(--cream); }
#collection { background: var(--paper-dk); }
#visit { background: var(--brown-dk); color: var(--paper); }
#visit .section-title { color: var(--paper); }
#visit .section-title em { color: var(--gold-lt); }
#visit .section-label { color: var(--gold); }
#visit .about-body { color: rgba(245,237,216,0.65); }
#inquire { background: var(--paper); }
#inquire .section-title em { color: var(--rust); }

/* ====== ABOUT PHOTO STACK ====== */
.photo-stack { position: relative; height: 480px; }
.photo-main { position: absolute; top: 0; left: 0; width: 80%; height: 85%; object-fit: cover; border: 6px solid var(--paper); box-shadow: 8px 8px 0 var(--border); z-index: 1; }
.photo-accent { position: absolute; bottom: 0; right: 0; width: 55%; height: 50%; object-fit: cover; border: 6px solid var(--paper); box-shadow: -4px 4px 0 var(--border); z-index: 2; }
.photo-tag { position: absolute; bottom: 12%; left: -1rem; z-index: 3; background: var(--brown-dk); color: var(--gold-lt); font-family: var(--font-display); font-size: 0.78rem; line-height: 1.5; padding: 0.75rem 1rem; max-width: 160px; border-left: 3px solid var(--gold); }
.about-info { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.about-info-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--brown-lt); }
.about-info-item i { color: var(--rust); }

/* ====== COLLECTION ====== */
.collection-card { background: var(--cream); border: 1px solid var(--border); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.collection-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(44,26,14,0.15); }
.collection-img-wrap { position: relative; height: 220px; overflow: hidden; }
.collection-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: sepia(15%) contrast(1.05); }
.collection-card:hover .collection-img-wrap img { transform: scale(1.06); }
.collection-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(44,26,14,0.5), transparent 60%); }
.collection-body { padding: 1.4rem; border-top: 3px solid var(--gold); }
.collection-body h4 { font-family: var(--font-head); font-size: 1.15rem; color: var(--brown-dk); margin-bottom: 0.4rem; }
.collection-body p { font-size: 0.85rem; color: var(--muted); line-height: 1.7; margin: 0; }
.collection-note { text-align: center; font-family: var(--font-display); font-size: 0.88rem; color: var(--brown-lt); letter-spacing: 0.06em; }

/* ====== VISIT ====== */
.visit-block { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.visit-item { display: flex; align-items: flex-start; gap: 1rem; }
.visit-item i { color: var(--gold); font-size: 1.1rem; margin-top: 3px; flex-shrink: 0; }
.visit-item strong { display: block; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-family: var(--font-body); margin-bottom: 0.35rem; }
.visit-item span { font-size: 0.95rem; color: rgba(245,237,216,0.8); }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 0.2rem; }
.hours-table td { padding: 0.3rem 0; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hours-table td:first-child { color: rgba(245,237,216,0.5); width: 100px; }
.hours-table td:last-child { color: rgba(245,237,216,0.85); }
.hours-note { font-size: 0.72rem; color: rgba(245,237,216,0.35); margin-top: 0.5rem; }
.map-wrap { overflow: hidden; border: 3px solid var(--gold); }
.map-wrap iframe { width: 100%; height: 320px; border: none; display: block; filter: sepia(20%) contrast(0.95); }
.admission-card { background: rgba(201,146,42,0.12); border: 1px solid rgba(201,146,42,0.3); padding: 1.2rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.admission-card i { font-size: 1.5rem; color: var(--gold); flex-shrink: 0; }
.admission-card strong { display: block; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.2rem; }
.admission-card span { font-size: 0.92rem; color: rgba(245,237,216,0.7); }

/* ====== INQUIRE ====== */
.inquire-note { display: flex; align-items: flex-start; gap: 0.75rem; background: rgba(155,69,24,0.08); border: 1px solid rgba(155,69,24,0.2); padding: 1rem 1.2rem; margin-top: 1.5rem; font-size: 0.82rem; color: var(--brown-mid); line-height: 1.6; text-align: left; }
.inquire-note i { color: var(--rust); flex-shrink: 0; margin-top: 2px; }
.contact-form { background: var(--cream); border: 1px solid var(--border); border-top: 4px solid var(--rust); padding: 2.5rem; }
.form-label-custom { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; display: block; }
.form-input-custom { width: 100%; background: var(--paper); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: 0.92rem; padding: 0.7rem 0.9rem; border-radius: 0; transition: border-color 0.2s, box-shadow 0.2s; outline: none; resize: vertical; }
.form-input-custom::placeholder { color: #C4A882; }
.form-input-custom:focus { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(155,69,24,0.08); }
.form-msg { font-size: 0.85rem; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.5rem; }
.form-msg.success { background: rgba(42,107,107,0.1); border: 1px solid rgba(42,107,107,0.3); color: var(--teal); }
.form-msg.error { background: rgba(155,69,24,0.08); border: 1px solid rgba(155,69,24,0.2); color: var(--rust); }

/* ====== GALLERY ====== */
#gallery { background: var(--cream); }
#gallery .section-title { color: var(--brown-dk); }
#gallery .section-title em { color: var(--rust); }
#gallery .section-label { color: var(--rust); }
#gallery .section-sub { color: var(--muted); }
#gallery .collection-note { color: var(--brown-lt); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 0.6rem; }
.gallery-item { overflow: hidden; position: relative; }
.gallery-item.tall { grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: sepia(20%) contrast(1.05); transition: transform 0.5s ease, filter 0.4s ease; }
.gallery-item:hover img { transform: scale(1.06); filter: sepia(0%) contrast(1.1); }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } }

/* ====== FOOTER ====== */
footer { background: var(--brown-dk); border-top: 3px solid var(--gold); padding: 3rem 0 1.5rem; }
.footer-top { border-bottom: 1px solid rgba(201,146,42,0.2); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.footer-brand-wild { font-family: var(--font-display); font-size: 0.9rem; color: var(--gold); letter-spacing: 0.12em; }
.footer-brand-main { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--paper); letter-spacing: 0.06em; }
.footer-ornament { font-size: 0.6rem; color: rgba(201,146,42,0.4); letter-spacing: 0.4em; margin-top: 0.5rem; }
.footer-address { font-size: 0.82rem; color: rgba(245,237,216,0.45); display: flex; align-items: center; gap: 0.4rem; }
.footer-address i { color: var(--gold); }
.footer-copy { color: rgba(245,237,216,0.3); font-size: 0.78rem; margin: 0; }
.site-by { font-size: 0.72rem; color: rgba(245,237,216,0.2); }
.site-by a { color: var(--teal-lt); transition: color 0.2s; }
.site-by a:hover { color: var(--gold); }
.foot-links a { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(245,237,216,0.3); margin: 0 0.5rem; transition: color 0.2s; }
.foot-links a:hover { color: var(--gold); }

/* ====== FADE IN ====== */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up-d1 { transition-delay: 0.1s; }
.fade-up-d2 { transition-delay: 0.2s; }
.fade-up-d3 { transition-delay: 0.3s; }

/* ====== RESPONSIVE ====== */
@media (max-width: 991px) { .photo-stack { height: 340px; } }
@media (max-width: 768px) { section { padding: 4rem 0; } .photo-stack { height: 280px; } .hero-title-main { font-size: clamp(3.2rem, 14vw, 5rem); } }