/* ============================================
   BABY MARROW ART & FOOD — STYLESHEET
   Earthy African art gallery meets Italian trattoria
   Terracotta · Charcoal · Warm off-white · Rust
   Organic · Intimate · Artistic · Editorial
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Syne:wght@400;500;600;700&display=swap');

:root {
  --terra:       #C45E35;
  --terra-dark:  #8E3D1E;
  --terra-pale:  #E8A07A;
  --char:        #1E1A16;
  --char-mid:    #2E2820;
  --char-light:  #4A3F34;
  --linen:       #F2EDE4;
  --linen-dark:  #E3D9CB;
  --linen-deep:  #C9BAA5;
  --cream:       #FBF8F3;
  --text:        #211C16;
  --text-mid:    #4A3F34;
  --text-muted:  #7A6C5A;
  --moss:        #3D5A3E;
  --moss-light:  #567A57;
  --shadow:      0 4px 32px rgba(30,26,22,0.14);
  --shadow-lg:   0 16px 64px rgba(30,26,22,0.22);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Syne', sans-serif; background: var(--cream); color: var(--text); overflow-x: hidden; }
h1, h2, h3, h4 { font-family: 'Cormorant', serif; }

/* ============================================
   LOADER — triple dot pulse with italic wordmark
   ============================================ */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--char);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; }

.loader-content { text-align: center; animation: loaderFadeUp 0.8s ease 0.3s both; }
.loader-word {
  font-family: 'Cormorant', serif;
  font-size: 4.5rem;
  font-weight: 300;
  font-style: italic;
  color: var(--linen);
  line-height: 1;
  letter-spacing: -0.02em;
}
.loader-word span { color: var(--terra); }
.loader-sub {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(242,237,228,0.32);
  margin-top: 8px;
}
@keyframes loaderFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

.loader-dots { display: flex; gap: 8px; justify-content: center; animation: loaderFadeUp 0.8s ease 0.6s both; }
.loader-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--terra); animation: dotPulse 1.2s ease-in-out infinite; }
.loader-dots span:nth-child(2) { animation-delay: 0.2s; background: var(--terra-pale); }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; background: var(--linen-deep); }
@keyframes dotPulse { 0%,100%{transform:scale(0.7);opacity:0.4} 50%{transform:scale(1.2);opacity:1} }

/* ============================================
   NAVBAR
   ============================================ */
.navbar { background: var(--cream); border-bottom: 1px solid var(--linen-dark); padding: 1rem 0; position: sticky; top: 0; z-index: 1000; }
.navbar-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-mark { font-family: 'Cormorant', serif; font-style: italic; font-size: 2rem; color: var(--terra); line-height: 1; font-weight: 300; }
.brand-name .top { font-family: 'Cormorant', serif; font-size: 1.1rem; font-weight: 600; color: var(--char); letter-spacing: 0.06em; line-height: 1; }
.brand-name .bot { display: block; font-family: 'Syne', sans-serif; font-size: 0.5rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.navbar-nav .nav-link { color: var(--text-mid) !important; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.35rem 0.8rem !important; transition: color 0.25s; }
.navbar-nav .nav-link:hover { color: var(--terra) !important; }
.btn-nav-book { background: var(--terra) !important; color: var(--cream) !important; font-size: 0.65rem !important; font-weight: 600; letter-spacing: 0.2em; padding: 0.4rem 1.15rem !important; transition: background 0.3s; }
.btn-nav-book:hover { background: var(--terra-dark) !important; color: var(--cream) !important; }
.navbar-toggler { border-color: rgba(196,94,53,0.3); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(196,94,53,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* ============================================
   HERO — full dark, oversized italic type + split
   ============================================ */
.hero { background: var(--char); min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; }
.hero::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%231E1A16'/%3E%3Crect width='1' height='1' x='0' y='0' fill='%23ffffff' opacity='0.025'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23ffffff' opacity='0.025'/%3E%3C/svg%3E"); pointer-events:none; z-index:0; }

.hero-text-panel { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 8rem 3.5rem 5rem 5%; }
.hero-eyebrow { font-family: 'Syne', sans-serif; font-size: 0.6rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--terra); margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(4rem, 7vw, 7.5rem); font-weight: 300; font-style: italic; color: var(--linen); line-height: 0.88; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.hero h1 .accent { color: var(--terra); font-style: normal; font-weight: 700; display: block; font-size: 0.38em; letter-spacing: 0.18em; margin-bottom: 0.25em; font-family: 'Syne', sans-serif; text-transform: uppercase; }
.hero h1 .sub-word { font-style: normal; font-weight: 400; font-size: 0.28em; color: rgba(242,237,228,0.28); display: block; letter-spacing: 0.48em; text-transform: uppercase; font-family: 'Syne', sans-serif; margin-top: 0.75em; }
.hero-desc { font-family: 'Cormorant', serif; font-style: italic; font-size: 1.1rem; color: rgba(242,237,228,0.48); line-height: 1.8; max-width: 380px; margin: 1.75rem 0 2.5rem; font-weight: 300; }
.brush-divider { width: 60px; height: 3px; background: linear-gradient(to right, var(--terra), var(--terra-pale)); margin-bottom: 2rem; border-radius: 2px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.hero-tag { font-family: 'Syne', sans-serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(242,237,228,0.4); border: 1px solid rgba(242,237,228,0.1); padding: 0.28rem 0.8rem; }
.btn-terra { background: var(--terra); color: var(--cream); border: none; font-family: 'Syne', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; padding: 0.9rem 2rem; text-decoration: none; display: inline-block; transition: all 0.3s; margin-right: 0.75rem; margin-bottom: 0.5rem; }
.btn-terra:hover { background: var(--terra-dark); color: var(--cream); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(196,94,53,0.35); }
.btn-ghost-linen { background: transparent; color: rgba(242,237,228,0.58); border: 1px solid rgba(242,237,228,0.16); font-family: 'Syne', sans-serif; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; padding: 0.9rem 2rem; text-decoration: none; display: inline-block; transition: all 0.3s; margin-bottom: 0.5rem; }
.btn-ghost-linen:hover { border-color: var(--linen); color: var(--linen); }

.hero-image-panel { position: relative; overflow: hidden; z-index: 1; }
.hero-img-main { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.52) saturate(0.85); }
.hero-img-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(30,26,22,0.65) 0%, rgba(30,26,22,0.08) 50%); }
.hero-art-badge { position: absolute; top: 2.5rem; right: 2rem; background: var(--terra); color: var(--cream); padding: 1rem 1.25rem; text-align: center; z-index: 2; }
.hero-art-badge .big { font-family: 'Cormorant', serif; font-size: 2.2rem; font-style: italic; font-weight: 300; line-height: 1; }
.hero-art-badge .lbl { display: block; font-family: 'Syne', sans-serif; font-size: 0.52rem; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0.75; margin-top: 3px; }
.hero-since { position: absolute; bottom: 2.5rem; left: -10px; background: var(--char-mid); border-left: 3px solid var(--terra); padding: 1rem 1.5rem; z-index: 2; }
.hero-since .yr { font-family: 'Cormorant', serif; font-size: 2.5rem; color: var(--linen); font-weight: 300; line-height: 1; }
.hero-since .est { font-family: 'Syne', sans-serif; font-size: 0.55rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 2px; }
.hero-scroll-cue { position: absolute; bottom: 2.5rem; left: 5%; z-index: 2; }
.hero-scroll-cue span { font-family: 'Syne', sans-serif; font-size: 0.55rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.25); display: block; margin-bottom: 0.5rem; }
.hero-scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(196,94,53,0.7), transparent); animation: scrollGlow 2s ease-in-out infinite; }
@keyframes scrollGlow { 0%,100%{opacity:.3} 50%{opacity:1} }
@media (max-width: 900px) { .hero{grid-template-columns:1fr} .hero-text-panel{padding:7rem 5% 3rem} .hero-image-panel{height:50vw} .hero-since{display:none} }

/* ============================================
   SECTION COMMONS
   ============================================ */
.sec-eyebrow { font-family: 'Syne', sans-serif; font-size: 0.6rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--terra); display: block; margin-bottom: 0.65rem; }
.sec-title { font-family: 'Cormorant', serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; font-style: italic; line-height: 1.05; color: var(--char); margin-bottom: 0.5rem; }
.sec-title strong { font-style: normal; font-weight: 600; }
.brush-line { width: 52px; height: 3px; background: var(--terra); border-radius: 2px; margin: 1.2rem 0; }
.brush-line.center { margin-left: auto; margin-right: auto; }

/* ============================================
   ABOUT
   ============================================ */
.about-section { background: var(--linen); padding: 8rem 0; }
.about-intro { font-family: 'Cormorant', serif; font-style: italic; font-size: 1.4rem; line-height: 1.65; color: var(--text); margin-bottom: 1.5rem; font-weight: 300; }
.about-body { font-size: 0.9rem; line-height: 1.9; color: var(--text-muted); margin-bottom: 1rem; }
.art-quote { border-left: 3px solid var(--terra); padding: 1.5rem 1.75rem; background: var(--linen-dark); margin: 2rem 0; }
.art-quote blockquote { font-family: 'Cormorant', serif; font-style: italic; font-size: 1.2rem; line-height: 1.65; color: var(--text); font-weight: 300; margin-bottom: 0.5rem; }
.art-quote cite { font-family: 'Syne', sans-serif; font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); font-style: normal; }
.about-image-frame { position: relative; }
.about-image-frame img { width: 100%; height: 520px; object-fit: cover; display: block; }
.about-image-frame::before { content:''; position:absolute; top:16px; left:16px; right:-16px; bottom:-16px; border:2px solid var(--terra); opacity:0.25; z-index:-1; }
.about-image-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(30,26,22,0.85), transparent); padding: 2rem 1.5rem 1.25rem; }
.about-image-caption span { font-family: 'Cormorant', serif; font-style: italic; font-size: 1.05rem; color: var(--linen); }

/* ============================================
   MENU
   ============================================ */
.menu-section { background: var(--cream); padding: 8rem 0; position: relative; }
.menu-section::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background: repeating-linear-gradient(90deg, var(--terra) 0px, var(--terra) 24px, transparent 24px, transparent 34px, var(--linen-deep) 34px, var(--linen-deep) 40px, transparent 40px, transparent 50px); }
.menu-category-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--linen-dark); }
.menu-cat-name { font-family: 'Cormorant', serif; font-size: 1.6rem; font-style: italic; font-weight: 300; color: var(--char); }
.menu-cat-icon { color: var(--terra); font-size: 1rem; }
.menu-entry { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px dashed rgba(201,186,165,0.5); }
.menu-entry:last-child { border-bottom: none; }
.menu-entry-name { font-family: 'Cormorant', serif; font-size: 1.1rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.menu-entry-desc { font-family: 'Syne', sans-serif; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.55; font-style: normal; }
.menu-entry-price { font-family: 'Cormorant', serif; font-size: 1.1rem; color: var(--moss); white-space: nowrap; flex-shrink: 0; font-weight: 600; }
.star-badge { display: inline-flex; align-items: center; gap: 3px; font-family: 'Syne', sans-serif; font-size: 0.48rem; font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; background: var(--terra); color: var(--cream); padding: 0.12rem 0.45rem; margin-left: 0.4rem; vertical-align: middle; }

/* ============================================
   GALLERY — expanding accordion panels
   ============================================ */
.gallery-section { background: var(--char); padding: 7rem 0; overflow: hidden; }
.gallery-section .sec-title { color: var(--linen); }
.gallery-section .sec-eyebrow { color: rgba(196,94,53,0.75); }
.art-strip { display: flex; gap: 0; margin-top: 2.5rem; overflow-x: auto; scrollbar-width: none; }
.art-strip::-webkit-scrollbar { display: none; }
.art-panel { flex: 0 0 200px; height: 420px; position: relative; overflow: hidden; cursor: pointer; transition: flex 0.5s cubic-bezier(0.4,0,0.2,1); }
.art-panel:hover { flex: 0 0 480px; }
.art-panel img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s ease; filter:saturate(0.65) brightness(0.85); }
.art-panel:hover img { transform:scale(1.04); filter:saturate(1.05) brightness(0.9); }
.art-panel-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(30,26,22,0.9) 0%, rgba(30,26,22,0.2) 55%, transparent 100%); }
.art-panel-info { position:absolute; bottom:1.5rem; left:1.5rem; right:1.5rem; }
.art-panel-cat { font-family:'Syne',sans-serif; font-size:0.55rem; letter-spacing:0.45em; text-transform:uppercase; color:var(--terra-pale); margin-bottom:0.35rem; }
.art-panel-title { font-family:'Cormorant',serif; font-style:italic; font-size:1.3rem; color:var(--linen); font-weight:300; }
.art-panel-expand { font-family:'Syne',sans-serif; font-size:0.62rem; color:rgba(242,237,228,0.35); margin-top:0.4rem; opacity:0; transition:opacity 0.3s 0.1s; }
.art-panel:hover .art-panel-expand { opacity:1; }

/* ============================================
   EVENTS — editorial listing layout
   ============================================ */
.events-section { background: var(--linen); padding: 8rem 0; }
.event-listing { display:flex; gap:2.5rem; padding:2.5rem 0; border-top:1px solid var(--linen-dark); align-items:flex-start; }
.event-listing:last-child { border-bottom:1px solid var(--linen-dark); }
.event-listing-day { flex:0 0 100px; text-align:center; padding-top:0.3rem; }
.event-listing-day .day-name { font-family:'Syne',sans-serif; font-size:0.58rem; letter-spacing:0.45em; text-transform:uppercase; color:var(--terra); margin-bottom:0.25rem; }
.event-listing-day .day-num { font-family:'Cormorant',serif; font-size:3.5rem; line-height:1; color:rgba(30,26,22,0.07); font-weight:600; }
.event-listing-content { flex:1; }
.event-listing-title { font-family:'Cormorant',serif; font-size:1.7rem; font-style:italic; font-weight:300; color:var(--char); margin-bottom:0.5rem; }
.event-listing-desc { font-size:0.85rem; line-height:1.8; color:var(--text-muted); max-width:520px; }
.event-listing-meta { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1rem; }
.event-listing-meta span { font-family:'Syne',sans-serif; font-size:0.7rem; color:var(--text-muted); display:flex; align-items:center; gap:0.4rem; }
.event-listing-meta span i { color:var(--terra); }
@media(max-width:576px){ .event-listing{flex-direction:column;gap:0.75rem} .event-listing-day{text-align:left} .event-listing-day .day-num{font-size:2rem} }

/* ============================================
   REVIEWS — dark editorial
   ============================================ */
.reviews-section { background: var(--char); padding: 8rem 0; position: relative; }
.reviews-section::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23C45E35' opacity='0.055'/%3E%3C/svg%3E"); pointer-events:none; }
.reviews-section .sec-title { color: var(--linen); }
.reviews-section .sec-eyebrow { color: rgba(196,94,53,0.7); }
.review-card { background:var(--char-mid); border:1px solid rgba(242,237,228,0.07); padding:2rem; height:100%; position:relative; transition:border-color 0.3s; }
.review-card:hover { border-color:rgba(196,94,53,0.3); }
.review-card.featured { background:var(--terra); border:none; }
.review-card.featured .review-text { color:rgba(251,248,243,0.9); }
.review-card.featured .reviewer { color:var(--cream); }
.review-card.featured .reviewer-src { color:rgba(251,248,243,0.5); }
.review-card.featured .review-quote-mark { color:rgba(251,248,243,0.12); opacity:1; }
.review-card.featured .review-stars { color:rgba(251,248,243,0.7); }
.review-quote-mark { font-family:'Cormorant',serif; font-size:5rem; color:var(--terra); opacity:0.14; position:absolute; top:0.5rem; right:1.25rem; line-height:1; font-style:italic; }
.review-stars { color:var(--terra-pale); font-size:0.72rem; margin-bottom:0.7rem; }
.review-text { font-family:'Cormorant',serif; font-style:italic; font-size:1rem; line-height:1.72; color:rgba(242,237,228,0.72); margin-bottom:1.25rem; }
.reviewer { font-family:'Syne',sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:rgba(242,237,228,0.62); }
.reviewer-src { font-family:'Syne',sans-serif; font-size:0.62rem; color:rgba(242,237,228,0.3); margin-top:2px; }

/* ============================================
   LOCATION
   ============================================ */
.location-section { background: var(--linen); padding: 8rem 0; }
.contact-item { margin-bottom: 1.75rem; }
.contact-lbl { font-family:'Syne',sans-serif; font-size:0.56rem; letter-spacing:0.48em; text-transform:uppercase; color:var(--text-muted); display:block; margin-bottom:0.3rem; }
.contact-val { font-family:'Cormorant',serif; font-size:1.1rem; color:var(--text); line-height:1.5; }
.contact-val a { color:var(--text); text-decoration:none; transition:color 0.2s; }
.contact-val a:hover { color:var(--terra); }
.map-frame { width:100%; height:420px; border:none; display:block; filter:sepia(0.2) saturate(0.8); }
.social-row { display:flex; gap:0.6rem; margin-top:1.75rem; }
.social-btn { width:40px; height:40px; border:1px solid var(--linen-deep); display:flex; align-items:center; justify-content:center; color:var(--text-muted); text-decoration:none; font-size:0.95rem; transition:all 0.3s; }
.social-btn:hover { background:var(--terra); color:var(--cream); border-color:var(--terra); }
.booking-banner { background:var(--char); padding:2rem 2.5rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; }
.booking-banner-text { font-family:'Cormorant',serif; font-style:italic; font-size:1.5rem; color:var(--linen); font-weight:300; }
.booking-banner-sub { font-family:'Syne',sans-serif; font-size:0.73rem; color:rgba(242,237,228,0.38); margin-top:2px; }
.btn-book-terra { background:var(--terra); color:var(--cream); border:none; font-family:'Syne',sans-serif; font-size:0.68rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; padding:0.85rem 2rem; text-decoration:none; display:inline-block; transition:all 0.3s; white-space:nowrap; }
.btn-book-terra:hover { background:var(--terra-dark); color:var(--cream); }

/* ============================================
   FOOTER
   ============================================ */
.site-footer { background:var(--char); padding:4rem 0 1.75rem; border-top:1px solid rgba(196,94,53,0.18); }
.footer-logo { font-family:'Cormorant',serif; font-style:italic; font-size:2.2rem; font-weight:300; color:var(--linen); }
.footer-logo strong { font-style:normal; font-weight:600; }
.footer-tagline { font-family:'Cormorant',serif; font-style:italic; font-size:0.9rem; color:rgba(242,237,228,0.26); margin-top:0.4rem; }
.footer-heading { font-family:'Syne',sans-serif; font-size:0.55rem; letter-spacing:0.45em; text-transform:uppercase; color:rgba(196,94,53,0.48); margin-bottom:1rem; }
.footer-links { list-style:none; padding:0; }
.footer-links li { margin-bottom:0.45rem; }
.footer-links a { font-family:'Syne',sans-serif; font-size:0.75rem; letter-spacing:0.07em; color:rgba(242,237,228,0.27); text-decoration:none; text-transform:uppercase; transition:color 0.2s; }
.footer-links a:hover { color:var(--terra-pale); }
.footer-bottom { margin-top:3rem; padding-top:1.25rem; border-top:1px solid rgba(242,237,228,0.06); font-family:'Syne',sans-serif; font-size:0.65rem; color:rgba(242,237,228,0.17); text-align:center; letter-spacing:0.08em; }

/* ============================================
   ANIMATIONS
   ============================================ */
.fade-up { opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.d1 { transition-delay:0.1s; }
.d2 { transition-delay:0.2s; }
.d3 { transition-delay:0.3s; }
.d4 { transition-delay:0.4s; }