/* Golden Chopstix — base, layout, header, footer, shared components. */

/* ---------- layout primitives ---------- */
.shell { width: var(--shell); margin-inline: auto; padding-inline: var(--edge); }
.measure { max-width: var(--measure); margin-inline: auto; }
main { display: block; }
section { position: relative; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: var(--ms-5); letter-spacing: -0.02em; }
h3 { font-size: var(--ms-3); }
p { text-wrap: pretty; }
:lang(ko), .mrow-kr, .sig-kr, .mcat-kr { font-family: var(--font-kr); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-radius: var(--r-pill);
  font-family: var(--font-text); font-weight: 600; font-size: var(--ms-0);
  letter-spacing: 0.01em; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur-element) var(--ease-standard), background var(--dur-element) var(--ease-standard), box-shadow var(--dur-element) var(--ease-standard), color var(--dur-element) var(--ease-standard);
  min-height: 48px; text-align: center;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--ms-1); min-height: 56px; }
.btn-solid { background: var(--accent); color: var(--accent-ink); box-shadow: var(--e1); }
.btn-solid:hover { background: var(--accent-press); transform: translateY(-2px); box-shadow: var(--e2); }
.btn-ghost { background: transparent; color: currentColor; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.btn-ghost:hover { border-color: currentColor; transform: translateY(-2px); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--accent); }
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-element) var(--ease-standard); }
.link-arrow:hover svg { transform: translateX(4px); }

.skip { position: absolute; left: 50%; transform: translateX(-50%) translateY(-120%); top: 8px; background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-4); border-radius: var(--r-pill); z-index: 200; transition: transform var(--dur-element); }
.skip:focus { transform: translateX(-50%) translateY(0); }

/* ---------- icons ---------- */
.flame { width: 1em; height: 1.25em; fill: var(--gold); filter: drop-shadow(0 0 6px rgba(var(--ember), 0.5)); }
.flame .flame-inner { fill: var(--accent); }
.chili { width: 0.9em; height: 0.9em; fill: var(--accent); vertical-align: -0.05em; }

/* ---------- announce ---------- */
.announce { background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); font-size: var(--ms-dn1); letter-spacing: 0.04em; text-transform: uppercase; position: relative; z-index: 90; }
.announce .flame { width: 1.1em; height: 1.3em; }

/* ---------- header ---------- */
.site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 100; padding-block: var(--space-4); transition: background var(--dur-section) var(--ease-standard), box-shadow var(--dur-section) var(--ease-standard), padding var(--dur-section) var(--ease-standard); }
.site-head.is-stuck { position: fixed; background: rgba(245, 241, 232, 0.9); backdrop-filter: blur(12px) saturate(1.1); box-shadow: var(--e2); padding-block: var(--space-3); }
.head-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); }
.head-mark { justify-self: center; display: block; }
.head-mark img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; transition: filter var(--dur-section), opacity var(--dur-section); }
.site-head.is-stuck .head-mark img { filter: none; opacity: 1; }
.nav { display: flex; gap: var(--space-5); align-items: center; }
.nav-left { justify-self: start; }
.nav-link { position: relative; color: var(--on-char); font-weight: 500; font-size: var(--ms-0); letter-spacing: 0.01em; opacity: 0.9; padding-block: var(--space-2); transition: opacity var(--dur-element); }
.is-stuck .nav-link { color: var(--ink); }
.nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1.5px; background: var(--accent); transition: right var(--dur-element) var(--ease-standard); }
.nav-link:hover, .nav-link.is-active { opacity: 1; }
.nav-link:hover::after, .nav-link.is-active::after { right: 0; }
.head-cta { justify-self: end; display: flex; gap: var(--space-3); align-items: center; }
.head-cta .btn-ghost { color: var(--on-char); border-color: color-mix(in srgb, var(--on-char) 35%, transparent); }
.is-stuck .head-cta .btn-ghost { color: var(--ink); border-color: var(--line-2); }
.head-cta .btn-ghost span { font-variant-numeric: tabular-nums; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 48px; height: 48px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; justify-self: start; }
.nav-toggle span { width: 26px; height: 2px; background: var(--on-char); transition: transform var(--dur-element), opacity var(--dur-element); }
.is-stuck .nav-toggle span { background: var(--ink); }
.nav-overlay { position: fixed; inset: 0; background: var(--char); z-index: 99; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--dur-section) var(--ease-standard), visibility var(--dur-section); }
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.nav-overlay-inner a:not(.btn) { color: var(--on-char); font-family: var(--font-display); font-size: var(--ms-4); }
body.nav-open { overflow: hidden; }

/* ---------- shared: char stratum + ember atmosphere ---------- */
.hero, .page-hero, .menu-hero, .story-teaser, .menu-foot-cta, .visit-band { background: var(--char); color: var(--on-char); overflow: clip; }
.hero-atmos { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.ember { position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: 55%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(var(--ember), 0.42), rgba(var(--ember), 0.10) 38%, transparent 62%); filter: blur(10px); animation: emberPulse 7s var(--ease-standard) infinite alternate; }
.ember-2 { width: 42vmax; height: 42vmax; left: 72%; top: 22%; background: radial-gradient(circle, rgba(242, 177, 52, 0.28), transparent 60%); animation-duration: 9s; }
.grain { position: absolute; inset: -50%; background-image: url("/static/img/grain.png"); background-size: 220px; opacity: 0.06; mix-blend-mode: overlay; animation: grainShift 8s steps(6) infinite; }
@keyframes emberPulse { from { opacity: 0.75; transform: translate(-50%, -50%) scale(1); } to { opacity: 1; transform: translate(-50%, -52%) scale(1.08); } }
@keyframes grainShift { 0%{transform:translate(0,0)} 100%{transform:translate(-8%,6%)} }

/* ---------- page hero (interior) ---------- */
.page-hero { padding-top: calc(var(--space-11) + var(--space-6)); padding-bottom: var(--section-y); text-align: center; }
.page-hero h1 { font-size: clamp(var(--ms-6), 9vw, var(--ms-8)); }
.page-hero-sub { color: var(--on-char-muted); font-size: var(--ms-2); margin-top: var(--space-4); }

/* ---------- visit band ---------- */
.visit-band { padding-block: var(--section-y); text-align: center; }
.visit-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-7); }
.vb-item { display: flex; align-items: center; gap: var(--space-3); text-align: left; }
.vb-item svg { width: 26px; height: 26px; color: var(--gold); flex: none; }
.vb-item p { color: var(--on-char); font-size: var(--ms-0); line-height: 1.4; }
.vb-item a { color: var(--gold); }

/* ---------- prose (story / legal) ---------- */
.prose { padding-block: var(--section-y); background: var(--paper); text-align: center; }
.prose .lead { font-family: var(--font-display); font-size: var(--ms-3); line-height: 1.3; color: var(--ink); margin-bottom: var(--space-6); }
.prose p { font-size: var(--ms-1); color: var(--ink-2); margin-bottom: var(--space-5); }
.prose .pull { font-family: var(--font-display); font-size: var(--ms-5); color: var(--accent); margin-block: var(--space-8); display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.prose .pull span { font-size: 0.8em; }
.prose-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-7); }

/* ---------- reveal system (one verb: rise) ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); }
.is-in [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-cinematic) var(--ease-expressive), transform var(--dur-cinematic) var(--ease-expressive); transition-delay: calc(var(--ri, 0) * var(--stagger)); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ember, .ember-2, .grain, .hero-fire, .steam, .scroll-cue i { animation: none !important; }
}

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--paper); padding-top: var(--section-y); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); text-align: left; }
.foot-brand { text-align: center; }
.foot-badge { width: 96px; height: auto; margin-inline: auto; margin-bottom: var(--space-4); }
.foot-tag { font-family: var(--font-display); font-style: italic; font-size: var(--ms-3); color: var(--gold); }
.foot-since { color: color-mix(in srgb, var(--paper) 60%, transparent); font-size: var(--ms-dn1); margin-top: var(--space-2); letter-spacing: 0.03em; }
.foot-col h4 { font-family: var(--font-text); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--ms-dn1); color: var(--gold); margin-bottom: var(--space-4); }
.foot-col a, .foot-col p { display: block; color: color-mix(in srgb, var(--paper) 82%, transparent); margin-bottom: var(--space-2); font-size: var(--ms-0); }
.foot-col a:hover { color: var(--paper); }
.foot-hours { font-size: var(--ms-dn1); line-height: 1.5; }
.foot-base { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--section-y); padding-top: var(--space-5); padding-bottom: var(--space-7); border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
.foot-legal a { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.foot-credit { color: color-mix(in srgb, var(--paper) 55%, transparent); font-size: var(--ms-dn1); }
.foot-credit a { color: var(--gold); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 64rem) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
  .nav-left, .head-cta { display: none; }
  .nav-toggle { display: flex; }
  .head-inner { grid-template-columns: 1fr auto 1fr; }
  .head-mark { justify-self: center; }
  .foot-grid { grid-template-columns: 1fr; text-align: center; }
  .foot-col a, .foot-col p { }
  .foot-base { justify-content: center; text-align: center; }
  .visit-band-inner { flex-direction: column; gap: var(--space-5); }
  .vb-item { flex-direction: column; text-align: center; gap: var(--space-2); }
  .vb-item p { text-align: center; }
}