/* =====================================================================
   THE KIMCHI KW — app.css
   "Warm Korean kitchen" — terracotta, cream, rounded & appetite-forward.
   Inspired by the Special Kimchi reference layout.
   ===================================================================== */

:root {
    --terra:      #b53f1b;
    --terra-d:    #9c3416;
    --terra-dd:   #7d2810;
    --cream:      #fdf0e0;
    --cream-2:    #f7e4cf;
    --brown:      #a23f2a;
    --brown-soft: #b5654a;
    --cocoa:      #8a5038;
    --orange:     #ffa72c;
    --orange-d:   #f2941a;
    --ink:        #3a1c12;
    --line:       rgba(58,28,18,.14);
    --line-cream: rgba(253,240,224,.18);

    --font-display: 'Poppins', system-ui, sans-serif;
    --font-han:     'Black Han Sans', system-ui, sans-serif;
    --font-ui:      'Poppins', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    --maxw: 1200px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --r: 18px;
    --r-sm: 12px;
    --r-pill: 100px;
    --ease: cubic-bezier(.22,.61,.36,1);
    --shadow: 0 8px 28px rgba(58,28,18,.16);
    --shadow-sm: 0 4px 14px rgba(58,28,18,.12);
    --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 70px); }
html, body { overflow-x: hidden; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
    margin: 0; width: 100%;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--terra);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.terra-pattern {
    background-color: var(--terra);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.03) 0, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,.05) 0, transparent 45%),
        repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 38px, rgba(0,0,0,.02) 38px, rgba(0,0,0,.02) 39px);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
button { font-family: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:where(a,button,input,select,textarea):focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
    display:inline-flex; align-items:center; gap:.55rem;
    font-family: var(--font-body);
    font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    color:var(--orange); margin-bottom:1rem;
}
.eyebrow::before { content:""; width:24px; height:2px; background:var(--orange); border-radius:2px; }
.eyebrow .han { font-family:var(--font-han); letter-spacing:normal; font-size:1.05rem; font-weight:400; }
.eyebrow.on-cream { color:var(--brown); }
.eyebrow.on-cream::before { background:var(--brown); }

.h-display {
    font-family: var(--font-display); font-weight: 700; letter-spacing:-.015em;
    font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.01em; line-height: 1.02;
}
.h-display .accent { color: var(--orange); }
.h-display.on-cream { color: var(--brown); }
.h-display.on-cream .accent { color: var(--terra); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-family: var(--font-ui); font-weight:700; font-size:.9rem; letter-spacing:.02em;
    padding:.8rem 1.9rem; border-radius:var(--r-pill); border:2px solid transparent; cursor:pointer;
    transition:all .25s var(--ease); }
.btn-solid { background:var(--orange); color:var(--ink); }
.btn-solid:hover { background:var(--orange-d); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-cream { background:var(--cream); color:var(--terra); }
.btn-cream:hover { background:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-ghost { border-color:var(--cream); color:var(--cream); }
.btn-ghost:hover { background:var(--cream); color:var(--terra); }
.btn-brown { background:var(--brown); color:var(--cream); }
.btn-brown:hover { background:var(--terra-d); transform:translateY(-2px); }
.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.topbar { background:var(--terra-dd); color:var(--cream); font-size:.78rem; letter-spacing:.02em; }
.topbar .wrap { display:flex; justify-content:flex-end; gap:1.75rem; padding-block:.5rem; }
.topbar span { display:inline-flex; align-items:center; gap:.4rem; }
@media (max-width:720px){ .topbar { display:none; } }

.header { position:sticky; top:0; z-index:100; background:var(--terra); border-bottom:1px solid var(--line-cream); }
.header .wrap { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
.brand img { height:46px; width:auto; }
.brand .wordmark { font-family:var(--font-display); font-weight:700; color:var(--cream); font-size:1.4rem; letter-spacing:.02em; }
.nav ul { display:flex; align-items:center; gap:2rem; }
.nav a { color:var(--cream); font-family:var(--font-ui); font-size:.95rem; font-weight:600; letter-spacing:.02em; position:relative; padding-block:.35rem; }
.nav a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2.5px; background:var(--orange); border-radius:2px; transition:width .3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width:100%; }
.nav .btn-book { background:var(--orange); color:var(--ink); padding:.5rem 1.4rem; border-radius:var(--r-pill); }
.nav .btn-book::after { display:none; }
.nav .btn-book:hover { background:var(--orange-d); }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; width:44px; height:44px; color:var(--cream); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width:24px; height:2.5px; background:currentColor; border-radius:2px; margin:0 auto; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle span::before { position:absolute; transform:translateY(-7px); }
.nav-toggle span::after  { position:absolute; transform:translateY(7px); }
.nav-toggle.active span { background:transparent; }
.nav-toggle.active span::before { transform:rotate(45deg); }
.nav-toggle.active span::after  { transform:rotate(-45deg); }

@media (max-width:920px){
    .nav-toggle{ display:block; z-index:110; }
    .nav{ position:fixed; top:0; right:0; bottom:0; width:min(80vw,320px); background:var(--terra-d); padding:5rem 2rem 2rem; transform:translateX(100%); transition:transform .35s var(--ease), visibility .35s; box-shadow:-20px 0 50px rgba(0,0,0,.35); z-index:105; visibility:hidden; }
    .nav.open{ transform:none; visibility:visible; }
    .nav ul{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
    .nav a{ font-size:1.15rem; }
    body.nav-lock{ overflow:hidden; }
}

.hero { position:relative; min-height:min(88vh,760px); display:grid; place-items:center; text-align:center; color:var(--cream); overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.3s var(--ease); }
.hero-bg.on { opacity:1; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,15,.34), rgba(125,40,16,.72)); }
.hero-in { position:relative; z-index:2; max-width:760px; padding-inline:var(--gutter); animation:rise .9s var(--ease) both; }
.hero-kick { font-family:var(--font-body); font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:.8rem; color:var(--orange); margin-bottom:1rem; }
.hero-title { font-family:var(--font-display); font-weight:800; color:var(--cream); line-height:.95; letter-spacing:-.02em;
    font-size:clamp(3rem, 9vw, 6rem); margin-bottom:1.25rem; text-transform:uppercase; }
.hero-title .accent { color:var(--orange); display:block; }
.hero-lead { color:rgba(253,240,224,.9); font-size:clamp(.95rem,1.5vw,1.12rem); max-width:38rem; margin:0 auto 2rem; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.hero-dots { position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:.55rem; }
.hero-dots button { width:9px; height:9px; border-radius:50%; border:0; padding:0; background:rgba(253,240,224,.45); cursor:pointer; transition:all .3s var(--ease); }
.hero-dots button.on { background:var(--orange); width:26px; border-radius:6px; }
@keyframes rise { from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;} }

.section { padding-block:clamp(3rem,7vw,5.5rem); }
.section-head { max-width:640px; margin-bottom:3rem; }
.section-head.center { margin-inline:auto; text-align:center; }
.panel-cream { background:var(--cream); }
.panel-cream-2 { background:var(--cream-2); }

.dish-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; padding-top:64px; }
.dish {
    position:relative; background:var(--cream); border-radius:var(--r);
    padding:62px 1.25rem 1.4rem; box-shadow:var(--shadow-sm);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dish:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.dish-photo {
    position:absolute; top:-42px; left:1.1rem;
    width:104px; height:104px; object-fit:contain;
    filter:drop-shadow(0 10px 16px rgba(58,28,18,.28));
    background:transparent;
}
@media (max-width:420px){ .dish-photo { width:92px; height:92px; top:-38px; } }
.dish-price { position:absolute; top:1rem; right:1.15rem; font-family:var(--font-ui); font-weight:800; color:var(--brown); font-size:1.1rem; }
.dish-price small { font-size:.7rem; font-weight:600; }
.dish-name { font-family:var(--font-ui); font-weight:800; color:var(--brown); font-size:1.08rem; line-height:1.15; letter-spacing:-.01em; }
.dish-kor { font-family:var(--font-han); color:var(--brown-soft); font-size:.9rem; margin-top:.15rem; font-weight:400; }
.dish-desc {
    color:var(--cocoa); font-size:.85rem; margin-top:.5rem; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    cursor:pointer;
}
.dish-desc.expanded { -webkit-line-clamp:unset; overflow:visible; }

.center-cta { text-align:center; margin-top:3.5rem; }

.specials.section { background:var(--terra-d); }
.specials .dish { background:var(--cream); }

.rail { display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:64px .25rem 1rem; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail > * { flex:0 0 clamp(230px,28%,260px); scroll-snap-align:start; }

.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.gallery a { display:block; overflow:hidden; border-radius:var(--r-sm); aspect-ratio:1; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gallery a:hover img { transform:scale(1.08); }
@media (max-width:768px){ .gallery{ grid-template-columns:repeat(2,1fr); } }

.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.5rem; }
.info-cell { text-align:center; background:var(--cream); border-radius:var(--r); padding:2rem 1.25rem; box-shadow:var(--shadow-sm); }
.info-cell .ic { width:56px; height:56px; margin:0 auto 1rem; border-radius:50%; background:var(--orange); color:var(--ink); display:grid; place-items:center; font-size:1.4rem; }
.info-cell h4 { font-family:var(--font-ui); font-weight:800; color:var(--brown); font-size:1.05rem; margin-bottom:.4rem; }
.info-cell p { color:var(--cocoa); font-size:.92rem; margin:0; }
.info-cell a:hover { color:var(--terra); }

.footer { background:var(--terra-dd); color:var(--cream); text-align:center; padding-block:3rem; }
.footer .wordmark { font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--cream); letter-spacing:.02em; }
.footer img { height:56px; margin:0 auto 1.4rem; }
.social { display:flex; justify-content:center; gap:1rem; margin:1.4rem 0; }
.social a { width:44px; height:44px; border-radius:50%; background:rgba(253,240,224,.1); display:grid; place-items:center; font-size:1.15rem; transition:all .3s var(--ease); }
.social a:hover { background:var(--orange); color:var(--ink); }
.copyright { font-size:.82rem; color:rgba(253,240,224,.6); }

.to-top { position:fixed; right:1.4rem; bottom:1.4rem; z-index:90; width:48px; height:48px; border-radius:50%; border:0; background:var(--orange); color:var(--ink); font-size:1.2rem; cursor:pointer; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); box-shadow:var(--shadow); }
.to-top.show { opacity:1; pointer-events:auto; }
.to-top:hover { background:var(--orange-d); transform:translateY(-3px); }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

.page-head { text-align:center; padding-block:clamp(3.5rem,8vw,5rem) clamp(2rem,4vw,2.5rem); }
.page-head .han { display:block; color:var(--orange); font-family:var(--font-han); font-size:1.3rem; margin-bottom:.5rem; }
.page-head h1 { font-family:var(--font-display); font-weight:800; color:var(--cream); font-size:clamp(2.4rem,6vw,3.8rem); text-transform:uppercase; letter-spacing:-.01em; }
.page-head h1 .accent { color:var(--orange); }
.page-head p { color:rgba(253,240,224,.8); margin:1rem auto 0; max-width:36rem; }

.menu-controls { position:sticky; top:var(--header-h); z-index:80; background:var(--terra); border-bottom:1px solid var(--line-cream); }
.menu-controls .wrap { display:flex; align-items:center; gap:1rem; padding-block:.85rem; flex-wrap:wrap; }
.menu-search { position:relative; flex:1 1 220px; max-width:320px; }
.menu-search input { width:100%; padding:.65rem 1rem .65rem 2.4rem; border:0; border-radius:var(--r-pill); background:var(--cream); color:var(--ink); font-size:.9rem; }
.menu-search input::placeholder { color:var(--cocoa); }
.menu-search input:focus { outline:3px solid var(--orange); }
.menu-search .bx { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--cocoa); }

.chips { display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; padding-bottom:2px; }
.chips::-webkit-scrollbar{ display:none; }
.chip { flex:0 0 auto; padding:.5rem 1.15rem; border:2px solid var(--line-cream); border-radius:var(--r-pill); background:transparent; color:var(--cream); font-family:var(--font-ui); font-size:.88rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .22s var(--ease); }
.chip:hover { border-color:var(--orange); color:var(--orange); }
.chip.active { background:var(--orange); border-color:var(--orange); color:var(--ink); }

.menu-cat { padding-top:clamp(2.5rem,5vw,3.5rem); }
.menu-cat-head { display:flex; align-items:baseline; gap:.9rem; margin-bottom:2rem; }
.menu-cat-head .han { font-family:var(--font-han); color:var(--orange); font-size:1.25rem; }
.menu-cat-head h2 { font-family:var(--font-display); font-weight:700; color:var(--cream); font-size:clamp(1.6rem,3.5vw,2.2rem); text-transform:uppercase; letter-spacing:0; }
.menu-cat-head .count { margin-left:auto; color:rgba(253,240,224,.6); font-size:.82rem; }

.menu-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; padding-top:64px; }
.menu-empty { text-align:center; color:rgba(253,240,224,.75); padding:3rem 0; }

.res-wrap { display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:start; }
@media (max-width:900px){ .res-wrap{ grid-template-columns:1fr; } }

.floor-legend-bar { display:flex; gap:1.25rem; font-size:.78rem; color:var(--cream); margin-bottom:.75rem; }
.floor-legend-bar span { display:inline-flex; align-items:center; }
.floor-legend-bar i { display:inline-block; width:13px; height:13px; border-radius:50%; margin-right:.4rem; }
.lg-free { background:var(--cream); border:2px solid var(--brown-soft); }
.lg-sel  { background:var(--orange); border:2px solid var(--orange); }
.lg-taken{ background:#c9a892; border:2px solid var(--line); }

.floorplan { position:relative; width:100%; border:3px solid var(--cream); border-radius:var(--r); overflow:hidden; background:var(--cream-2); line-height:0; box-shadow:var(--shadow-sm); }
.floorplan-img { width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none; }
.floorplan.awaiting .pin { background:#c9a892; box-shadow:0 1px 4px rgba(58,28,18,.25); cursor:default; }
.floorplan.awaiting .pin:hover { transform:translate(-50%,-50%); background:#c9a892; box-shadow:0 1px 4px rgba(58,28,18,.25); }
.floorplan.awaiting::after { content:"Choose a date & time to see availability"; position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-family:var(--font-ui); font-size:1rem; font-weight:700; color:var(--ink); background:rgba(253,240,224,.62); padding:1rem; line-height:1.4; }

.pin { position:absolute; transform:translate(-50%,-50%); z-index:2;
    width:clamp(30px,5.2vw,46px); height:clamp(30px,5.2vw,46px); border-radius:50%;
    border:3px solid var(--cream); background:var(--brown-soft); color:var(--cream); cursor:pointer;
    display:grid; place-items:center; line-height:1; padding:0;
    box-shadow:0 3px 10px rgba(58,28,18,.4); transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
.pin-num { font-family:var(--font-ui); font-weight:800; font-size:clamp(.72rem,1.6vw,.98rem); }
.pin:hover { background:var(--orange); color:var(--ink); transform:translate(-50%,-50%) scale(1.15); box-shadow:0 4px 14px rgba(255,167,44,.6); z-index:5; }
.pin.selected { background:var(--orange); color:var(--ink); border-color:var(--cream); transform:translate(-50%,-50%) scale(1.18); box-shadow:0 0 0 4px rgba(255,167,44,.35), 0 4px 14px rgba(255,167,44,.5); z-index:5; }
.pin.taken { background:#c9a892; color:#8a6b58; cursor:not-allowed; opacity:.9; box-shadow:0 1px 4px rgba(58,28,18,.3); }
.pin.taken .pin-num { text-decoration:line-through; }
.pin.taken:hover { background:#c9a892; transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(58,28,18,.3); }
.floor-note { text-align:center; font-size:.82rem; color:rgba(253,240,224,.75); margin-top:.85rem; }

.form-card { background:var(--cream); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.25rem); box-shadow:var(--shadow); }
.form-card h3 { font-family:var(--font-ui); font-weight:800; color:var(--brown); font-size:1.3rem; letter-spacing:-.01em; margin-bottom:.35rem; }
.form-card .sub { color:var(--cocoa); font-size:.9rem; margin-bottom:1.5rem; }
.field { margin-bottom:1rem; }
.field label { display:block; font-family:var(--font-ui); font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brown); margin-bottom:.4rem; }
.field input, .field select, .field textarea { width:100%; padding:.8rem .9rem; border:2px solid var(--line); border-radius:var(--r-sm); font-size:.95rem; font-family:var(--font-body); background:#fff; color:var(--ink); transition:border-color .22s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--orange); outline:none; }
.field textarea { resize:vertical; min-height:90px; }
.field.invalid input, .field.invalid select { border-color:var(--terra); }
.field .err { color:var(--terra); font-size:.78rem; min-height:1rem; margin-top:.25rem; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:480px){ .row-2{ grid-template-columns:1fr; } }

.pick-summary { display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; background:var(--cream-2); border-radius:var(--r-sm); font-size:.92rem; margin-bottom:1rem; color:var(--ink); }
.pick-summary .bx { color:var(--terra); font-size:1.2rem; }
.pick-summary strong { font-family:var(--font-ui); font-weight:800; }
.pick-summary.empty { color:var(--cocoa); }

.avail-msg { font-size:.88rem; margin:.25rem 0 1rem; min-height:1.1rem; font-weight:500; }
.avail-msg.ok  { color:#3f7d4e; }
.avail-msg.bad { color:var(--terra); }
.btn-submit { width:100%; }

.res-steps { display:flex; gap:1.5rem; justify-content:center; margin-bottom:2.5rem; flex-wrap:wrap; }
.res-step { display:flex; align-items:center; gap:.6rem; font-family:var(--font-ui); font-weight:600; font-size:.88rem; color:rgba(253,240,224,.7); }
.res-step .n { width:28px; height:28px; border-radius:50%; border:2px solid var(--line-cream); display:grid; place-items:center; font-weight:600; font-size:.85rem; }
.res-step.active .n { background:var(--orange); border-color:var(--orange); color:var(--ink); }
.res-step.active { color:var(--cream); }

.res-done { text-align:center; max-width:520px; margin:0 auto; background:var(--cream); border-radius:var(--r); padding:clamp(2rem,4vw,3rem); box-shadow:var(--shadow); }
.res-done .seal { width:84px; height:84px; border-radius:50%; background:var(--orange); color:var(--ink); display:grid; place-items:center; font-size:2.2rem; margin:0 auto 1.5rem; font-family:var(--font-han); font-weight:400; }
.res-done h1 { font-family:var(--font-display); font-weight:700; color:var(--brown); font-size:2rem; margin-bottom:.5rem; }
.res-done .han { font-family:var(--font-han); color:var(--terra); font-size:1.3rem; display:block; margin-bottom:1rem; }
.res-done .detail { background:var(--cream-2); border-radius:var(--r-sm); padding:1.25rem; margin:1.5rem 0; text-align:left; }
.res-done .detail div { display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px dashed var(--line); }
.res-done .detail div:last-child { border-bottom:0; }
.res-done .detail span:first-child { color:var(--cocoa); }
.res-done .detail span:last-child { font-family:var(--font-ui); font-weight:800; color:var(--brown); }