/* Bonchon — site-specific styles. Loaded after base.css. */

/* Fonts: latin subsets only, display=optional (no layout shift when they arrive) */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:optional;src:url(https://fonts.gstatic.com/s/barlow/v13/7cHpv4kjgoGqM7E_DMs5.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:optional;src:url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E30-8s51os.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:optional;src:url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B47b1z3bWuQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

h1,h2,h3{font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95}
h3{font-size:var(--fs-xl)}
a{color:var(--brand)}
.btn{border-radius:var(--radius);font-weight:600;min-height:48px}
.btn-primary{box-shadow:none}
.btn-primary:hover{background:var(--deep);filter:none}

/* Header */
.site-header{background:#fff}
.brand img{height:48px;width:auto}
.nav a{font-weight:600;color:var(--ink);font-size:var(--fs-md)}

/* Hero: red band, huge type, the platter breaking out of the bottom edge */
.hero-bc{background:var(--brand);color:#fff;padding-top:clamp(2.5rem,6vw,5rem)}
.hero-bc .container{display:grid;gap:var(--s-6);grid-template-columns:1fr}
.hero-bc h1{font-size:clamp(3rem,9.5vw,7.6rem);line-height:.88;margin:0;max-width:11ch}
.hero-bc .lede{color:#fff;font-size:var(--fs-lg);margin-top:var(--s-5);max-width:44ch}
.hero-bc .actions{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero-bc .btn-accent{font-size:var(--fs-lg)}
.btn-onred{background:transparent;color:#fff;border-color:#fff;font-size:var(--fs-lg)}
.btn-onred:hover{background:#fff;color:var(--brand)}
.hero-plate{margin:0 auto -18%;position:relative;z-index:1;width:min(100%,640px)}
.hero-plate img{width:100%;height:auto}
@media(min-width:960px){
  .hero-bc .container{grid-template-columns:1.1fr .9fr;align-items:end}
  .hero-bc .copy{padding-bottom:clamp(3rem,6vw,5rem)}
  .hero-plate{margin:0 0 -22%}
}

/* Process: the real 1-2-3 sequence */
.process{padding-top:calc(var(--section) + 12vw)}
@media(min-width:960px){.process{padding-top:calc(var(--section) + 10vw)}}
.process h2{font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:var(--s-3)}
.process .sub{font-size:var(--fs-lg);color:var(--ink-2);margin-bottom:var(--s-7)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-7);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.steps figure{margin:0 0 var(--s-4)}
.steps img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.steps .n{font-family:var(--font-display);font-weight:800;font-size:3.2rem;line-height:1;color:var(--brand);display:block;margin-bottom:var(--s-2)}
.steps h3{margin-bottom:var(--s-3)}
.steps p{color:var(--ink-2)}

/* Flavors on soy black */
.flavors{background:var(--soy);color:#fff}
.flavors .container{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media(min-width:960px){.flavors .container{grid-template-columns:1.2fr .8fr;align-items:center}}
.flavors h2{color:var(--accent);font-size:var(--fs-2xl)}
.flavor-list{list-style:none;margin:0;padding:0}
.flavor-list li{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,6.5vw,4.8rem);line-height:1;padding:.12em 0;border-bottom:1px solid rgba(255,255,255,.18)}
.flavors p{color:#e6e5e5}
.flavors img{width:100%;height:auto;margin-bottom:var(--s-5)}
.flavors .small{color:#bdb9b9}

/* Korean dishes */
.dishes{background:var(--bg-alt)}
.dishes .container{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media(min-width:960px){.dishes .container{grid-template-columns:1fr 1fr;align-items:start}}
.dishes .list-rows{border-color:#cfcbca}
.dishes .list-rows li{grid-template-columns:1fr;border-color:#cfcbca}
.dishes .list-rows h3{font-size:var(--fs-xl)}
.dishes figure{margin:0}
.dishes figure img{width:100%;height:auto}
.dishes .small{display:block;margin-top:var(--s-4)}

/* Story */
.story .container{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media(min-width:960px){.story .container{grid-template-columns:1.1fr .9fr;align-items:center}}
.story .pullquote{font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.08;text-transform:none;font-weight:800;color:var(--soy);max-width:22ch}
.story blockquote{margin:0;border-left:6px solid var(--brand);padding-left:var(--s-5)}
.story cite{display:block;margin-top:var(--s-4);font-style:normal;font-weight:600;color:var(--ink-2)}

/* Catering, gift cards, app */
.more .list-rows li{grid-template-columns:1fr auto;align-items:center}
.more .list-rows li>span:last-child{white-space:normal}
@media(max-width:640px){.more .list-rows li{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:var(--soy)}
.site-footer .brand img{height:56px}
.footer-grid h2{font-family:var(--font-body);text-transform:none;font-size:var(--fs-sm);color:#fff;margin-bottom:var(--s-3);font-weight:600}

/* Inner pages */
.page-hero{background:var(--brand);color:#fff;padding-block:clamp(2.5rem,6vw,4.5rem)}
.page-hero h1{font-size:clamp(2.8rem,8vw,6rem);margin-bottom:var(--s-4)}
.page-hero .lede{color:#fff;max-width:52ch}
.page-hero .actions{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.story-hero{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.story-hero{grid-template-columns:1fr 1fr}}
.story-hero figure{margin:0}
.story-hero img{width:100%;height:auto;border-radius:var(--radius)}
.subnav{background:var(--soy);position:sticky;top:var(--header-h);z-index:50}
.subnav .container{display:flex;gap:var(--s-5);overflow-x:auto;padding-block:var(--s-3)}
.subnav a{color:#fff;text-decoration:none;font-weight:600;white-space:nowrap;padding:.6em 0;min-height:44px;display:inline-flex;align-items:center}
.subnav a:hover{color:var(--accent)}
.menu-sec.alt,.section.alt{background:var(--bg-alt)}
.menu-grid{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media(min-width:960px){.menu-grid{grid-template-columns:1.2fr .8fr;align-items:start}.menu-grid figure{position:sticky;top:calc(var(--header-h) + 5rem)}}
.menu-grid figure{margin:0}
.menu-grid figure img{width:100%;height:auto}
.menu-sec .list-rows li{grid-template-columns:1fr}
.menu-sec .list-rows h3{font-size:var(--fs-xl)}
.list-rows .opts{color:var(--brand);font-weight:600;font-size:var(--fs-sm);margin:.2em 0 0}
.flavor-chips{list-style:none;padding:0;margin:var(--s-3) 0 0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.flavor-chips li{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:var(--fs-lg);background:var(--soy);color:#fff;padding:.35em .7em;border-radius:var(--radius)}
.states{columns:3 220px;column-gap:var(--s-7)}
.states .state{break-inside:avoid;margin-bottom:var(--s-6)}
.states h3{font-size:var(--fs-lg);color:var(--brand);margin-bottom:var(--s-2)}
.states ul{list-style:none;padding:0;margin:0}
.states li{padding:0}
.states a{color:var(--ink);font-weight:600;text-decoration-color:var(--brand);display:inline-block;padding:.6em 0;min-height:44px}
.plain-list{padding-left:1.2em;max-width:65ch}
.plain-list li{margin-bottom:var(--s-3)}
.flavors img{background:#fff}
