:root{
  --bg-deep: #241512;
  --bg-panel: #2f1c17;
  --bg-panel-2: #3b241d;
  --glaze: #c77a2e;
  --glaze-bright: #e4a853;
  --gochu: #a63d2f;
  --cream: #f2e8dc;
  --cream-dim: #cbb9a6;
  --line: rgba(242,232,220,0.14);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background: var(--bg-deep);
  color: var(--cream);
  font-family: 'Be Vietnam Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.display{ font-family:'Fraunces', serif; letter-spacing:-0.01em; }
a{ color:inherit; text-decoration:none; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50; opacity:0.05; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav ---------- */
nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 6%;
  background: linear-gradient(180deg, rgba(36,21,18,0.96), rgba(36,21,18,0.85));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.logo{font-family:'Fraunces',serif; font-weight:800; font-size:1.5rem; letter-spacing:0.02em;}
.logo span{color:var(--glaze-bright);}
.nav-links{display:flex; gap:2.2rem; font-size:0.92rem; color:var(--cream-dim);}
.nav-links a{ padding-bottom:4px; border-bottom:1px solid transparent; transition: all .2s ease; }
.nav-links a:hover, .nav-links a.active{color:var(--glaze-bright); border-color:var(--glaze-bright);}
.nav-cta{
  padding:0.55rem 1.3rem; border:1px solid var(--glaze); border-radius:999px;
  font-size:0.88rem; color:var(--cream); transition: all .25s ease; white-space:nowrap;
}
.nav-cta:hover{background:var(--glaze); border-color:var(--glaze);}
@media (max-width:760px){ .nav-links{display:none;} }

/* ---------- Page header (non-home pages) ---------- */
.page-hero{
  padding: 9vh 6% 6vh;
  background:
    radial-gradient(ellipse 60% 60% at 85% 0%, rgba(199,122,46,0.18), transparent 60%),
    var(--bg-deep);
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{
  font-size:0.82rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--glaze-bright);
  margin-bottom:1.2rem; display:flex; align-items:center; gap:0.7rem;
}
.page-hero .eyebrow::before{content:''; width:28px; height:1px; background:var(--glaze-bright); display:inline-block;}
.page-hero h1{ font-size:clamp(2.6rem,6vw,4.6rem); font-weight:800; max-width:16ch; line-height:1; }
.page-hero p.sub{ margin-top:1.4rem; max-width:50ch; font-size:1.05rem; color:var(--cream-dim); line-height:1.65; }

/* ---------- Hero (home) ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; flex-direction:column;
  justify-content:center; padding: 6vh 6% 8vh;
  background:
    radial-gradient(ellipse 60% 50% at 80% 15%, rgba(199,122,46,0.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(166,61,47,0.18), transparent 60%),
    var(--bg-deep);
  overflow:hidden;
}
.hero-inner{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:3.5rem; align-items:center;
  position:relative; z-index:2;
}
@media (max-width:940px){ .hero-inner{grid-template-columns:1fr;} }
.hero-visual{
  position:relative; border-radius:22px; overflow:hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 0 1px var(--line);
  aspect-ratio: 4/3;
}
.hero-visual img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05) contrast(1.03);
}
.hero-visual::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(36,21,18,0) 55%, rgba(36,21,18,0.55) 100%);
}
.hero-visual .cap{
  position:absolute; left:1.4rem; bottom:1.2rem; z-index:2;
  font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--cream);
}
.steam{ position:absolute; bottom:0; opacity:0.5; filter:blur(1px); }
.steam path{ animation: rise 6s ease-in-out infinite; transform-origin:bottom center; }
.steam path:nth-child(2){ animation-delay: 1.4s; }
.steam path:nth-child(3){ animation-delay: 2.8s; }
@keyframes rise{
  0%{ transform:translateY(10px) scaleY(0.9); opacity:0; }
  30%{ opacity:0.55; }
  100%{ transform:translateY(-140px) scaleY(1.15); opacity:0; }
}
.eyebrow{
  font-size:0.82rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--glaze-bright);
  margin-bottom:1.4rem; display:flex; align-items:center; gap:0.7rem;
}
.eyebrow::before{content:''; width:28px; height:1px; background:var(--glaze-bright); display:inline-block;}
.hero h1{
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  font-weight:800; line-height:0.92; color:var(--cream);
  max-width: 14ch;
}
.hero h1 em{ font-style:italic; font-weight:500; color:var(--glaze-bright); }
.hero p.sub{ margin-top:1.8rem; max-width:34ch; font-size:1.08rem; color:var(--cream-dim); line-height:1.6; }
.hero-actions{ display:flex; gap:1rem; margin-top:2.6rem; flex-wrap:wrap; }

.btn{
  padding:0.9rem 1.8rem; border-radius:999px; font-weight:600; font-size:0.95rem;
  transition: all .25s ease; display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; border:none;
  font-family:inherit;
}
.btn-primary{ background:var(--glaze-bright); color:#2a1710; }
.btn-primary:hover{ background:var(--cream); transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); color:var(--cream); background:transparent; }
.btn-ghost:hover{ border-color:var(--glaze-bright); color:var(--glaze-bright); }

/* ---------- Signature: simmer dial ---------- */
.simmer{
  padding: 10vh 6%; background: var(--bg-panel);
  display:grid; grid-template-columns: 1fr 1fr; gap:5rem; align-items:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:900px){ .simmer{grid-template-columns:1fr; gap:3rem;} }
.simmer-text .kicker{ color:var(--glaze-bright); font-size:0.82rem; letter-spacing:0.18em; text-transform:uppercase; }
.simmer-text h2{ font-size:clamp(2rem,4vw,2.8rem); margin:0.8rem 0 1.2rem; font-weight:700; }
.simmer-text p{ color:var(--cream-dim); line-height:1.75; font-size:1rem; max-width:46ch; }
.simmer-text p + p{ margin-top:1rem; }
.dial-wrap{ display:flex; justify-content:center; }
.dial{ position:relative; width:320px; height:320px; }
.dial svg{ width:100%; height:100%; transform:rotate(-90deg); }
.dial-track{ fill:none; stroke:rgba(242,232,220,0.1); stroke-width:10; }
.dial-fill{ fill:none; stroke:var(--glaze-bright); stroke-width:10; stroke-linecap:round;
  stroke-dasharray: 754; stroke-dashoffset:754;
  animation: fillDial 2.4s cubic-bezier(.2,.8,.2,1) 0.3s forwards;
}
@keyframes fillDial{ to{ stroke-dashoffset: 63; } }
.dial-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dial-center .num{ font-family:'Fraunces',serif; font-size:4.4rem; font-weight:800; color:var(--cream); line-height:1;}
.dial-center .lab{ margin-top:0.4rem; font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream-dim);}

/* ---------- Menu ---------- */
.menu-section{ padding: 10vh 6%; }
.menu-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3.5rem; flex-wrap:wrap; gap:1rem; }
.menu-head h2{ font-size:clamp(2rem,4vw,2.8rem); font-weight:700; }
.menu-head .kicker{ color:var(--glaze-bright); font-size:0.82rem; letter-spacing:0.18em; text-transform:uppercase; }
.menu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:900px){ .menu-grid{grid-template-columns:1fr;} }
.menu-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:700px){ .menu-grid.cols-2{grid-template-columns:1fr;} }

.dish{
  background: var(--bg-panel); border:1px solid var(--line); border-radius:18px;
  padding:2.1rem; position:relative; overflow:hidden; transition: transform .3s ease, border-color .3s ease;
}
.dish:hover{ transform:translateY(-6px); border-color:var(--glaze); }
.dish .tag{
  display:inline-block; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gochu); border:1px solid var(--gochu); padding:0.2rem 0.6rem; border-radius:999px; margin-bottom:1rem;
}
.dish.signature .tag{ color:var(--glaze-bright); border-color:var(--glaze-bright); }
.dish h3{ font-family:'Fraunces',serif; font-size:1.5rem; font-weight:700; margin-bottom:0.6rem; }
.dish p{ color:var(--cream-dim); font-size:0.92rem; line-height:1.6; margin-bottom:1.4rem; min-height:4.6em; }
.dish .price{ font-family:'Fraunces',serif; font-size:1.3rem; color:var(--glaze-bright); font-weight:600; }

/* ---------- Combo / delivery ---------- */
.combo-section{ padding:10vh 6%; background: var(--bg-panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.combo-inner{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media (max-width:900px){ .combo-inner{grid-template-columns:1fr;} }
.combo-list{ display:flex; flex-direction:column; gap:1.1rem; margin-top:1.6rem; }
.combo-row{ display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.combo-row .name{ font-weight:600; font-size:1.02rem; }
.combo-row .desc{ color:var(--cream-dim); font-size:0.85rem; margin-top:0.2rem; }
.combo-row .price{ font-family:'Fraunces',serif; color:var(--glaze-bright); font-size:1.15rem; white-space:nowrap; margin-left:1rem;}
.channels{ display:flex; gap:0.9rem; margin-top:2rem; flex-wrap:wrap; }
.channel{ border:1px solid var(--line); border-radius:12px; padding:0.9rem 1.2rem; font-size:0.88rem; color:var(--cream-dim); display:flex; align-items:center; gap:0.6rem; }
.channel .dot{ width:8px; height:8px; border-radius:50%; background:var(--glaze-bright); }

/* ---------- Story / values (about) ---------- */
.values{ padding:10vh 6%; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:900px){ .values{grid-template-columns:1fr;} }
.value-card{ border:1px solid var(--line); border-radius:18px; padding:2rem; background:var(--bg-panel); }
.value-card .n{ font-family:'Fraunces',serif; font-size:1rem; color:var(--glaze-bright); margin-bottom:1rem; }
.value-card h3{ font-family:'Fraunces',serif; font-size:1.3rem; margin-bottom:0.7rem; }
.value-card p{ color:var(--cream-dim); font-size:0.92rem; line-height:1.6; }

.timeline{ padding: 0 6% 10vh; }
.timeline-row{ display:grid; grid-template-columns:120px 1fr; gap:2rem; padding:1.6rem 0; border-top:1px solid var(--line); }
.timeline-row:last-child{ border-bottom:1px solid var(--line); }
.timeline-row .yr{ font-family:'Fraunces',serif; font-size:1.1rem; color:var(--glaze-bright); }
.timeline-row h4{ font-size:1.05rem; margin-bottom:0.4rem; }
.timeline-row p{ color:var(--cream-dim); font-size:0.92rem; line-height:1.6; max-width:60ch; }

/* ---------- Visit / contact ---------- */
.visit{ padding:10vh 6% 6vh; display:grid; grid-template-columns:1.1fr 1fr; gap:4rem; }
@media (max-width:900px){ .visit{grid-template-columns:1fr; gap:2.5rem;} }
.visit h2{ font-size:clamp(2rem,4vw,2.8rem); font-weight:700; margin-bottom:1.6rem; }
.info-row{ display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.info-row .k{ width:110px; flex-shrink:0; color:var(--glaze-bright); font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; padding-top:0.15rem;}
.info-row .v{ color:var(--cream); font-size:1rem; line-height:1.6; }
.map-card{
  border:1px solid var(--line); border-radius:18px; overflow:hidden; min-height:280px;
  background: linear-gradient(160deg, rgba(199,122,46,0.14), transparent 60%), var(--bg-panel);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.map-card .pin{ width:46px; height:46px; border-radius:50% 50% 50% 0; background:var(--glaze-bright); transform: rotate(-45deg); position:relative; box-shadow:0 10px 30px rgba(228,168,83,0.35); }
.map-card .pin::after{ content:''; width:16px; height:16px; background:var(--bg-deep); border-radius:50%; position:absolute; top:15px; left:15px; }
.map-note{ position:absolute; bottom:1.4rem; left:1.4rem; right:1.4rem; font-size:0.82rem; color:var(--cream-dim); }

/* ---------- Form (order/contact) ---------- */
.form-card{ border:1px solid var(--line); border-radius:18px; padding:2.4rem; background:var(--bg-panel); }
.form-row{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.4rem; }
.form-row label{ font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--cream-dim); }
.form-row input, .form-row textarea, .form-row select{
  background: var(--bg-deep); border:1px solid var(--line); border-radius:10px; padding:0.85rem 1rem;
  color:var(--cream); font-family:inherit; font-size:0.95rem;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ outline:none; border-color:var(--glaze-bright); }
.form-row textarea{ resize:vertical; min-height:100px; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:600px){ .form-grid-2{grid-template-columns:1fr;} }

/* ---------- Footer ---------- */
footer{
  padding:3rem 6%; display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); flex-wrap:wrap; gap:1rem; font-size:0.85rem; color:var(--cream-dim);
}

::selection{ background:var(--glaze-bright); color:#2a1710; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--glaze-bright); outline-offset:3px; }