:root{
  --bg-black:#0b0b0b;
  --text-white:#f4f4f4;
  --text-yellow:#ffd95e;
  --accent-red:#c1121f;
  --accent-red-ghost:#e5383b;
  --muted:#9a9a9a;
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg-black);
  color: var(--text-white);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit; cursor:pointer}

.container{max-width:var(--maxw); padding:0 20px; margin:0 auto}

/* Scroll progress */
#progress{
  position:fixed; top:0; left:0; height:4px; width:0;
  background:linear-gradient(90deg,var(--accent-red), var(--accent-red-ghost));
  z-index:9999;
}

/* Header */
.header{ position:fixed; top:12px; left:0; right:0; z-index:999; }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:10px 14px;
  margin:0 auto; max-width:var(--maxw);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.12em; font-size:18px; }
.brand img{ height:30px; width:auto } /* 150% up from 20px */
.menu{ display:flex; align-items:center; gap:14px; position:relative; }
.menu > a, .menu > button{ padding:8px 10px; border-radius:8px; border:none; background:transparent; color: var(--text-white); }
.menu > a:hover, .menu > button:hover{background:rgba(255,255,255,.08)}

/* Dropdowns */
.dropdown{ position:relative }
.dropdown-menu{
  position:absolute; top:110%; left:0; background:#111; border:1px solid #222; border-radius:10px; min-width:180px; overflow:hidden; display:none;
}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{
  display:block; padding:10px 14px; border-bottom:1px solid #1f1f1f;
}
.dropdown-menu a:hover{ background:#191919 }
.dropdown.right .dropdown-menu{ left:auto; right:0 }

/* Hero (Page 1) */
.hero{
  min-height:100vh;
  background: url('/assets/images/top-baroque.png') center/cover no-repeat fixed;
  display:grid; place-items:center;
  position:relative; color:var(--text-white);
}
.hero::after{
  content:""; position:absolute; inset:0;
  /* brightened overlay */
  background:linear-gradient(#00000030, #00000080 35%, #000000c0 75%);
}
.hero-inner{ position:relative; z-index:1; text-align:center; padding-top:6vh }
.hero-logo{ width:min(432px, 57.6vw); margin:0 auto 10px } /* 80% of previous */
.hero-title{ font-size: clamp(28px, 6vw, 64px); font-weight:900; letter-spacing:.18em; margin:10px 0 4px }
.hero-sub{ font-size: clamp(14px, 3.2vw, 22px); opacity:.95 }
.hero-sub .line{ display:block; margin-top:6px }

.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px }
.btn{
  padding:12px 18px; border-radius:12px; border:none; color:#fff; background:var(--accent-red);
  box-shadow:0 8px 22px rgba(193,18,31,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-2px) scale(1.01); filter: brightness(1.08); box-shadow:0 10px 28px rgba(229,56,59,.45) }
.btn-outline{ background:transparent; border:1px solid var(--accent-red) }

/* Sections */
.section{ padding:80px 0; background:#000 }
.section.light{ background:#0d0d0d }
.section-title{ font-size: clamp(20px, 4vw, 28px); letter-spacing:.12em; color:var(--text-yellow); margin:0 0 24px; }
.section-title.red{ color: var(--accent-red); } /* make key section titles red */
.section .spaced{ margin-top: calc(2 * 16px); } /* 2-row gap */

/* Fade-in animations */
.fade{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease }
.fade.show{ opacity:1; transform: none }

/* Cards (About) */
.card-grid{ display:grid; gap:16px; grid-template-columns: repeat(3, 1fr); }
.card{ background:#141414; border:1px solid #1e1e1e; border-radius:16px; padding:18px; }
.card h3{ margin:4px 0 8px; color:var(--text-yellow) }
.card p{ color:#ddd; line-height:1.65; margin:6px 0 }
.card .icon{ width:56px; height:56px; margin-bottom:8px; opacity:.95 }

/* Signature Menu cards */
.menu-grid{ display:grid; gap:16px; grid-template-columns: repeat(3, 1fr) }
.menu-card{ background:#101010; border:1px solid #1b1b1b; border-radius:16px; overflow:hidden; display:flex; flex-direction:column }
.menu-card img{ width:100%; height:200px; object-fit:cover }
.menu-card .body{ padding:14px }
.menu-card .title{ display:flex; justify-content:space-between; align-items:center; font-weight:700 }
.menu-card .title span.kr{ color:var(--text-yellow) }
.menu-card .title span.price{ color:#fff; font-weight:800 }
.menu-card p.note{ color:#d9d9d9; min-height:54px; margin:8px 0 0; font-size:14px; line-height:1.5 }

/* Store blocks */
.store{ display:grid; gap:18px; grid-template-columns: 1.1fr 1fr; }
.store .photos{ display:grid; gap:12px }
.store .photos img{ border-radius:12px }
.store .info{ background:#111; border:1px solid #1d1d1d; border-radius:16px; padding:16px }
.info h3{ margin:0 0 8px; color:var(--text-yellow) }
.info p{ margin:6px 0; color:#eee }
.info .btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
.map{ margin-top:14px; aspect-ratio: 16/9; width:100%; border:0; border-radius:12px }

/* Events */
.events img{ max-width: min(560px, 92%); margin: 10px auto; border-radius:12px; border:1px solid #1c1c1c; image-orientation: none; transform: rotate(0deg); }

/* Footer */
.footer{ text-align:center; padding:28px 0; color:#bbb; font-size:14px; border-top:1px solid #111; margin-top:40px }

/* Responsive */
@media (max-width: 980px){
  .menu-grid{ grid-template-columns: repeat(2, 1fr) }
  .card-grid{ grid-template-columns: 1fr }
  .store{ grid-template-columns: 1fr }
  .hero{ background-attachment: scroll; } /* ensure mobile shows bg */
}
@media (max-width: 640px){
  .menu{ gap:6px }
  .menu-grid{ grid-template-columns: 1fr }
  .hero-sub{ font-size: 14px }
  .hero-cta{ gap:8px }
}