/* ─── Header & Nav ───────────────────────────────────────────────
 * Sticky bar that sits transparent over the hero, then becomes a
 * lightly-frosted overlay once the user scrolls past the fold.
 * Routine interaction (hover, scroll-state toggle) stays under 200ms.
 */
/* ─── Header & Nav ───────────────────────────────────────────────
 * Fixed bar — floats over the hero (doesn't take layout space, so the
 * hero + CTA can claim a full viewport without overflow). Transparent
 * over the warm taupe surface, lightly-frosted on scroll. All interactive
 * type uses ONE treatment: small, uppercase, wide tracking.
 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  /* Frosted-haze background always on (was only on .is-scrolled).
   * Reads as a glass overlay anchoring the navigation. */
  background: rgba(79, 69, 64, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
  backdrop-filter: blur(12px) saturate(1.02);
  border-bottom: 1px solid rgba(245, 239, 230, 0.10);
}
/* The .is-scrolled toggle is a no-op now — keeping the selector around
 * so the page JS can still add the class without breaking, but the
 * haze is the default. */
.site-header.is-scrolled {
  background: rgba(79, 69, 64, 0.82);
  border-bottom-color: rgba(245, 239, 230, 0.10);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: clamp(1rem, 1.6vw, 1.25rem) 0;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--color-cream);
  text-decoration: none;
}
/* Header home link is now the hangul, not the English wordmark.
 * Same wide-tracked treatment as the hero hangul, scaled down for nav.
 */
.site-logo__hangul {
  font-family: var(--font-korean);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  letter-spacing: 0.45em;                       /* matches hero hangul */
  /* The wide letter-spacing adds trailing space at the right edge of the
   * last glyph; pull it back slightly so the visual left/right balance is
   * symmetric. */
  padding-right: 0.45em;
  margin-right: -0.45em;
  color: var(--color-cream);
  opacity: 0.88;
  transition: opacity var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-logo:hover .site-logo__hangul,
  .site-logo:focus-visible .site-logo__hangul {
    opacity: 1;
  }
}

/* Single shared treatment for ALL interactive header type:
 *   - Inter, weight 500
 *   - 0.75rem (12px) — small and confident
 *   - 0.18em tracking — wide, editorial
 *   - UPPERCASE
 *   - Same color (ink) with same hover (amber-deep)
 * This is the polish move: one type style across nav links + CTAs
 * stops the bar from reading as 3 different design languages.
 */
.site-nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.site-nav__list {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 720px) { .site-nav__list { display: flex; } }

.site-nav__list a,
.site-nav__cta-btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav__list a {
  position: relative;
  padding: 0.4rem 0;
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-fast) var(--ease-out);
}
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .site-nav__list a:hover,
  .site-nav__list a:focus-visible {
    color: var(--color-accent);
  }
  .site-nav__list a:hover::after,
  .site-nav__list a:focus-visible::after {
    transform: scaleX(1);
  }
}

/* Header CTAs — both outlined, both identical to the nav links typographically.
 * The only difference is the pill shape + 1px ink border. No filled-amber
 * "primary" button competing visually; the logo + nav stay the focal point.
 */
.site-nav__cta { display: flex; gap: 0.5rem; }
.site-nav__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(245, 239, 230, 0.30);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--duration-press) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav__cta-btn:hover,
  .site-nav__cta-btn:focus-visible {
    color: var(--color-bg);
    background: var(--color-cream);
    border-color: var(--color-cream);
    transform: translateY(-1px);
  }
}
.site-nav__cta-btn:active { transform: scale(0.97); }

/* Mobile menu toggle */
.nav-toggle { display: inline-flex; }
@media (min-width: 720px) { .nav-toggle { display: none; } }
.nav-toggle button {
  background: transparent;
  border: 1px solid rgba(245, 239, 230, 0.22);
  color: var(--color-cream);
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  transition:
    transform var(--duration-press) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-toggle button:hover {
    background: rgba(245, 239, 230, 0.06);
    border-color: rgba(245, 239, 230, 0.36);
  }
}
.nav-toggle button:active { transform: scale(0.94); }

/* Mobile menu — animated open/close instead of display: none snap.
 * Uses max-height + opacity for a smooth slide-down. */
.mobile-menu {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-rule);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition:
    max-height var(--duration-base) var(--ease-out),
    opacity    var(--duration-fast) var(--ease-out),
    visibility 0s linear var(--duration-base);
}
.mobile-menu.is-open {
  max-height: 24rem;
  opacity: 1;
  visibility: visible;
  transition:
    max-height var(--duration-base) var(--ease-out),
    opacity    var(--duration-fast) var(--ease-out),
    visibility 0s linear 0s;
}
.mobile-menu__list {
  list-style: none; margin: 0;
  padding: var(--space-lg) var(--space-edge);
  display: grid; gap: var(--space-md);
}
.mobile-menu__list a {
  color: var(--color-cream);
  font-size: var(--fs-h3);
  transition: color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .mobile-menu__list a:hover { color: var(--color-accent); }
}

/* ─── Hero — warm-brown bg, drifting figures, brand sits centered ───
 *   1. .hero__ambient    interior tungsten glow + drifting "figures"
 *   2. .hero__fog        slow weather drift
 *   3. .hero__brand      logo + hangul, centered
 *   4. .hero__below      CTA + meta strip
 * Entry handled via @starting-style on individual elements.
 */
.hero {
  position: relative;
  /* Sized so the hero + CTA strip together fit one viewport on standard
   * laptop sizes. 100vh minus the CTA section's ~8rem keeps the strip
   * visible without a scroll. */
  min-height: calc(100vh - 8rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  /* Mid-tone palette — warm taupe surface with quiet dull-gold pools and
   * a faint petrol whisper. Pools are "flickers" — restrained, not halos. */
  background:
    radial-gradient(ellipse 120% 80% at 50% 60%, rgba(184,153,104,0.10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 12% 30%, rgba(184,153,104,0.08), transparent 70%),
    radial-gradient(ellipse 50% 35% at 88% 25%, rgba(31,45,58,0.18), transparent 70%),
    linear-gradient(180deg, #443B36 0%, #4F4540 55%, #574C46 100%);
}

/* Layer 1 — ambient: warm light pools + slow drifting figures.
 * Fades up on first paint so the page doesn't start mid-motion.
 */
.hero__ambient {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1200ms 100ms var(--ease-out);
}
@starting-style {
  .hero__ambient { opacity: 0; }
}
.hero__ambient::after {
  /* Flickers of dull warm gold — small, soft pools. Not halos. */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 4vw at 18% 38%, rgba(184,153,104,0.22), transparent 70%),
    radial-gradient(circle 3vw at 82% 30%, rgba(184,153,104,0.18), transparent 70%),
    radial-gradient(circle 5vw at 60% 72%, rgba(184,153,104,0.14), transparent 70%),
    radial-gradient(circle 2vw at 38% 60%, rgba(192,57,43,0.10), transparent 70%);
  filter: blur(8px);
}

/* ── Fog: a slow drifting cloud layer above the figures, below the glass.
 * Uses one big soft radial gradient panned across via translateX over
 * 80 seconds. Gives the hero subtle "weather" without ever feeling busy.
 */
.hero__fog {
  position: absolute; inset: -10% -10%;
  z-index: 1;
  pointer-events: none;
  /* Mid-tone theme: faint cream highlight + a petrol shadow. */
  background:
    radial-gradient(ellipse 50% 40% at 30% 50%, rgba(245,239,230,0.05), transparent 70%),
    radial-gradient(ellipse 35% 30% at 75% 40%, rgba(31,45,58,0.10), transparent 70%);
  filter: blur(40px);
  animation: fog-drift 80s linear infinite;
  will-change: transform;
  opacity: 1;
  transition: opacity 1400ms 200ms var(--ease-out);
}
@starting-style {
  .hero__fog { opacity: 0; }
}
@keyframes fog-drift {
  0%   { transform: translate3d(-3%, 0, 0); }
  50%  { transform: translate3d(3%, -1%, 0); }
  100% { transform: translate3d(-3%, 0, 0); }
}

/* ── Window frame overlay ────────────────────────────────────────
 * A stylized SVG of the storefront's window mullions sits above the
 * figures and fog, below the brand. Stretches to fill the hero edge-
 * to-edge (preserveAspectRatio="none" in the SVG) so on every viewport
 * it reads as "we're standing inside, looking out the window wall."
 *
 * Fades in slowly on first paint — same cadence as the ambient layer.
 */
/* .hero__windows is a <picture> wrapper; the actual <img> inside is
 * .hero__windows-img. Layout + masking go on the wrapper; the inner
 * img just fills it. <picture> allows a mobile-specific SVG variant
 * (window-frame-mobile.svg) to load via the <source media> query. */
.hero__windows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: block;
  user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 70%, transparent 100%);
  opacity: 1;
  transition: opacity 1400ms 250ms var(--ease-out);
}
.hero__windows-img {
  display: block;
  width: 100%;
  height: 100%;
}
@starting-style {
  .hero__windows { opacity: 0; }
}

/* ── Dining-room interior — lanterns hang from above (visually from
 * the always-on header haze), tables sit on either side of the door.
 * z-index 3 places them above the window frame (z=2) but below the
 * brand mark in the transom (z=4). pointer-events: none so they don't
 * intercept hover/clicks on anything underneath. */
.hero__lantern,
.hero__table {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: block;
  height: auto;
  /* Override the base.css `img { max-width: 100% }` reset so the
   * mobile clamp can grow the tables/lanterns beyond the viewport
   * width — the .hero overflow:hidden handles the bleed. */
  max-width: none;
  user-select: none;
  /* Slow fade-in to match the rest of the interior layering */
  opacity: 1;
  transition: opacity 1400ms 350ms var(--ease-out);
}
@starting-style {
  .hero__lantern, .hero__table { opacity: 0; }
}

/* Lanterns hang from the top of the hero — cord visually emerges from
 * the bottom of the always-on header haze. The SVG viewBox extends up
 * by 800 units so ~2/3 of the rendered height is cord and ~1/3 is the
 * lantern body at the bottom.
 *
 * Centered on the secondary vertical mullions inside each side window
 * (window-frame.svg has those at x=200 and x=1000 of a 1200-wide
 * viewBox, which is 16.67% and 83.33% of the hero width). Using
 * translateX(-50%) so the lantern is centered ON the line rather than
 * starting at it. */
.hero__lantern {
  top: 0;
  width: clamp(12.5rem, 22.5vw, 17.5rem);
  transform: translateX(-50%);
}
.hero__lantern--left  { left: 16.67%; }
.hero__lantern--right { left: 83.33%; }

/* Tables sit on the CTA seam, centered directly under each lantern's
 * pool of light. Same 16.67% / 83.33% mullion lines as the lanterns
 * + translateX(-50%) so the table centerline is on the line, not its
 * left edge. The SVG viewBox was trimmed (460 → 410) so the leg ends
 * meet the bottom of the SVG; bottom: 0 then places those leg ends
 * right at the top of the wood-grain CTA, no drawn floor needed. */
.hero__table {
  bottom: 0;
  width: clamp(45.5rem, 77vw, 66.5rem);
  transform: translateX(-50%);
}
.hero__table--left  { left: 16.67%; }
.hero__table--right { left: 83.33%; }

/* The drifting figures — Seoul street through a rainy, foggy window.
 *
 * Three depth layers: --depth-near (less blur, larger, faster, more opaque tint),
 *                     --depth-mid  (medium everything),
 *                     --depth-far  (heavy blur, smaller scale, slower, washed-out).
 *
 * Two streams: --east (left → right) and --west (right → left).
 * Tints pulled from the brand palette so the streetscape reads warm + cool:
 *   --tint-petrol   cool figures (people in the cool blue between shopfronts)
 *   --tint-amber    warm halos (people lit by warm shop windows)
 *   --tint-cream    pale highlights (umbrellas, breath in cold air)
 *   --tint-taillight occasional red taillight glow on a passing figure
 *
 * Each figure carries a head-shoulders silhouette (radial gradient at top)
 * fading into a softer body column (linear gradient). Heavily blurred so it
 * reads as "a person past frosted glass," not a literal silhouette.
 */
.figure {
  --tint: rgba(31,45,58,0.85);                          /* default petrol */
  --tint-soft: rgba(31,45,58,0.45);
  position: absolute;
  bottom: 0;
  /* Slimmer body for better human proportion. */
  width: 3.75rem;
  height: 60%;
  background:
    /* Head: small ellipse, narrower than the body */
    radial-gradient(ellipse 50% 10% at 50% 5%, var(--tint), transparent 65%),
    /* Shoulder bulge: slightly wider rounded gradient just below the head */
    radial-gradient(ellipse 70% 8% at 50% 16%, var(--tint), transparent 60%),
    /* Body: linear fade from the shoulder line down */
    linear-gradient(180deg, transparent 0%, var(--tint-soft) 22%, transparent 100%);
  /* Asymmetric x/y radius — the top reads more like a head (oval)
   * than a perfectly rounded column. */
  border-radius: 55% 55% 0 0 / 30% 30% 0 0;
  opacity: var(--op, 0.65);
  filter: blur(var(--blur, 14px));
  transform: translate3d(-25vw, 0, 0) scale(var(--scale, 1));
  /* Two animations layered:
   *   1. The horizontal walk (transform: translate3d ...)
   *   2. A subtle vertical step bob using the CSS `translate` property —
   *      composes with the transform-based walk so they don't conflict.
   * Per-figure --bob-speed and --bob-delay let each figure step at a
   * slightly different cadence, so they're never in unison. */
  animation:
    var(--anim, walk-east) var(--speed, 30s) linear var(--delay, 0s) infinite,
    step-bob var(--bob-speed, 1.6s) ease-in-out var(--bob-delay, 0s) infinite;
  will-change: transform, translate;
}

/* Direction streams */
@keyframes walk-east {
  0%   { transform: translate3d(-25vw, 0, 0) scale(var(--scale, 1)); }
  100% { transform: translate3d(125vw, 0, 0) scale(var(--scale, 1)); }
}
@keyframes walk-west {
  0%   { transform: translate3d(125vw, 0, 0) scale(var(--scale, 1)); }
  100% { transform: translate3d(-25vw, 0, 0) scale(var(--scale, 1)); }
}

/* Step bob — two up/down peaks per cycle, mimicking the natural
 * vertical rise and fall of a body during a walking gait. The amount
 * (--bob-amount) is small (~4px) so it reads as gait, not bouncing. */
@keyframes step-bob {
  0%, 100% { translate: 0 0; }
  25%      { translate: 0 calc(-1 * var(--bob-amount, 4px)); }
  50%      { translate: 0 0; }
  75%      { translate: 0 calc(-1 * var(--bob-amount, 4px)); }
}

/* Umbrella — only on figures with the .figure--umbrella class.
 * ::before draws the canopy as a flattened dome, wider than the body.
 * ::after draws the thin stem connecting the canopy to where the
 * figure's hand would be holding it. Both inherit the parent's blur
 * and walk/bob transforms automatically. */
.figure--umbrella::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--umbrella-h, 1.1rem) - 0.2rem);
  left: calc(-1 * var(--umbrella-extend, 0.85rem));
  right: calc(-1 * var(--umbrella-extend, 0.85rem));
  height: var(--umbrella-h, 1.1rem);
  background: var(--tint);
  /* Flattened dome — y-radius >> x-radius gives a low-arching canopy */
  border-radius: 55% 55% 0 0 / 100% 100% 0 0;
  opacity: 0.88;
}
.figure--umbrella::after {
  content: "";
  position: absolute;
  /* Thin vertical stem from the bottom of the canopy down to where
   * the figure's hand would be (~upper-third of the head/shoulder area) */
  top: -0.3rem;
  left: 50%;
  width: 0.15rem;
  height: 0.55rem;
  background: var(--tint-soft);
  transform: translateX(-50%);
  opacity: 0.6;
}

/* Curious passerby — walks east, pauses well to the LEFT of the door
 * (further away than before, so the moment reads as quietly looking in
 * a side window), holds the lean for ~3 seconds, then continues past
 * the door. The "hands on glass" detail is timed so it fully fades
 * down BEFORE the figure starts moving again.
 */
@keyframes walk-pause-look {
  0%   { transform: translate3d(-25vw, 0, 0) scale(var(--scale, 1)); }
  22%  { transform: translate3d(16vw, 0, 0)  scale(var(--scale, 1)); }
  30%  { transform: translate3d(22vw, 0, 0)  scale(var(--scale, 1)); }
  /* Lean — body compresses (~10% smaller) as the figure crouches
   * forward toward the glass. transform-origin is bottom-center on
   * figure--01, so the feet stay planted and the body shrinks upward. */
  35%  { transform: translate3d(23vw, 0, 0)  scale(calc(var(--scale, 1) * 0.90)); }
  40%  { transform: translate3d(22vw, 0, 0)  scale(calc(var(--scale, 1) * 0.90)); }
  /* Body straightens back up as hands come down. */
  42%  { transform: translate3d(22vw, 0, 0)  scale(calc(var(--scale, 1) * 0.96)); }
  44%  { transform: translate3d(22vw, 0, 0)  scale(var(--scale, 1)); }
  /* Resumption */
  50%  { transform: translate3d(28vw, 0, 0)  scale(var(--scale, 1)); }
  100% { transform: translate3d(125vw, 0, 0) scale(var(--scale, 1)); }
}
/* Companion animation — figure becomes slightly less blurred during
 * the brief pause, suggesting "closer presence" while looking in.
 * Aligned with the new shorter pause window in walk-pause-look. */
@keyframes presence-pulse {
  0%, 28%   { filter: blur(8px); }
  35%, 42%  { filter: blur(5px); }
  48%, 100% { filter: blur(8px); }
}

/* ── 8 figures, mixed across depth/direction/tint ──
 * Opacities preserved from the previous version per Madison's note.
 */

/* Near layer — petrol cool, going east. THIS one is the "curious
 * passerby": it walks normally, then slows to a stop in front of the
 * door, lingers a beat as if looking in through the window, and
 * continues off-screen. Animation property is fully overridden here
 * because it composes two keyframe animations (position + blur). */
.figure--01 {
  --tint: rgba(31,45,58,0.95); --tint-soft: rgba(31,45,58,0.55);
  --scale: 1.05; --op: 0.7;
  bottom: -4%; height: 62%;
  /* Pivot scale around the feet so the lean compression looks like a
   * forward crouch rather than the figure shrinking from its center. */
  transform-origin: center bottom;
  animation:
    walk-pause-look 42s linear -8s infinite,
    presence-pulse  42s linear -8s infinite;
}
/* While paused, fade in a "hands-and-face-on-the-glass" detail —
 * two soft bumps on either side of the head (hands cupped to the
 * window) plus a slightly wider face press. Synced to the same 42s
 * cycle as walk-pause-look; visible only during the 38–62% window
 * (when the figure is stopped). Inherits the parent's blur so it
 * stays in the foggy aesthetic. */
.figure--01::before {
  content: "";
  position: absolute;
  top: -2%;
  left: -0.5rem;
  right: -0.5rem;
  height: 22%;
  background:
    /* Left hand — small ellipse off to the side */
    radial-gradient(ellipse 22% 50% at 6% 50%, var(--tint), transparent 65%),
    /* Right hand */
    radial-gradient(ellipse 22% 50% at 94% 50%, var(--tint), transparent 65%),
    /* Slightly wider face pressing flat */
    radial-gradient(ellipse 58% 75% at 50% 45%, var(--tint), transparent 65%);
  opacity: 0;
  animation: hands-on-glass 42s linear -8s infinite;
  pointer-events: none;
}
@keyframes hands-on-glass {
  /* Walking — invisible */
  0%, 30%   { opacity: 0; }
  /* Hands up — visible during the ~3 second pause */
  35%, 40%  { opacity: 0.85; }
  /* Hands fully down BEFORE the figure starts moving again (figure
   * resumes motion at 44%; hands fully off by 42%). */
  42%, 100% { opacity: 0; }
}

/* Mid layer — dull-gold halo (warm shop-window light), going west */
.figure--02 {
  --tint: rgba(184,153,104,0.55); --tint-soft: rgba(184,153,104,0.25);
  --blur: 16px; --scale: 0.95; --op: 0.5;
  --speed: 32s; --delay: -16s; --anim: walk-west;
  --bob-speed: 1.85s; --bob-delay: -0.9s; --bob-amount: 3px;  /* slow stroll */
  --umbrella-h: 1rem; --umbrella-extend: 0.7rem;             /* medium umbrella */
  bottom: -2%; height: 58%;
}

/* Near layer — petrol, going west */
.figure--03 {
  --tint: rgba(28,40,52,0.90); --tint-soft: rgba(28,40,52,0.50);
  --blur: 10px; --scale: 1.08; --op: 0.55;
  --speed: 22s; --delay: -22s; --anim: walk-west;
  --bob-speed: 1.45s; --bob-delay: -0.3s; --bob-amount: 5px;  /* brisk pace */
  bottom: -5%; height: 66%;
}

/* Far layer — dull gold wash, very slow, going east */
.figure--04 {
  --tint: rgba(184,153,104,0.45); --tint-soft: rgba(184,153,104,0.18);
  --blur: 22px; --scale: 0.78; --op: 0.4;
  --speed: 42s; --delay: -33s; --anim: walk-east;
  --bob-speed: 2.1s; --bob-delay: -1.2s; --bob-amount: 2px;  /* slow saunter */
  bottom: -3%; height: 52%;
}

/* Mid layer — petrol-leaning taupe, going east */
.figure--05 {
  --tint: rgba(56,52,58,0.85); --tint-soft: rgba(56,52,58,0.40);
  --blur: 14px; --scale: 1.0;  --op: 0.45;
  --speed: 28s; --delay: -9s;  --anim: walk-east;
  --bob-speed: 1.65s; --bob-delay: -0.55s; --bob-amount: 4px;
  --umbrella-h: 1.25rem; --umbrella-extend: 1rem;            /* full-size umbrella */
  bottom: -1%; height: 70%;
}

/* Far layer — cream highlight (umbrella / breath) against the mid-tone surface */
.figure--06 {
  --tint: rgba(245,239,230,0.45); --tint-soft: rgba(245,239,230,0.18);
  --blur: 24px; --scale: 0.72; --op: 0.32;
  --speed: 46s; --delay: -19s; --anim: walk-west;
  --bob-speed: 2.0s; --bob-delay: -0.7s; --bob-amount: 2px;
  bottom: 0%; height: 48%;
}

/* Mid layer — taillight red glow, going east, low opacity (rare flash of color) */
.figure--07 {
  --tint: rgba(192,57,43,0.55); --tint-soft: rgba(192,57,43,0.22);
  --blur: 18px; --scale: 0.88; --op: 0.30;
  --speed: 30s; --delay: -26s; --anim: walk-east;
  --bob-speed: 1.7s; --bob-delay: -1.1s; --bob-amount: 3px;
  bottom: -2%; height: 56%;
}

/* Near layer — petrol, going east, slightly faster (someone in a hurry) */
.figure--08 {
  --tint: rgba(35,48,62,0.92); --tint-soft: rgba(35,48,62,0.50);
  --blur: 9px;  --scale: 1.02; --op: 0.50;
  --speed: 20s; --delay: -38s; --anim: walk-east;
  --bob-speed: 1.35s; --bob-delay: -0.45s; --bob-amount: 5px;  /* in a hurry */
  --umbrella-h: 0.9rem; --umbrella-extend: 0.7rem;             /* compact umbrella */
  bottom: -3%; height: 64%;
}

/* Mid layer — warm amber-gold (catching shop-window light), going east.
 * Small negative delay so they're visible early in the cycle. */
.figure--09 {
  --tint: rgba(200,160,95,0.65); --tint-soft: rgba(200,160,95,0.30);
  --blur: 13px; --scale: 0.95; --op: 0.50;
  --speed: 26s; --delay: -3s; --anim: walk-east;
  --bob-speed: 1.55s; --bob-delay: -0.65s; --bob-amount: 4px;
  bottom: -2%; height: 60%;
}

/* Near layer — deeper red glow (taillight or coat), going east. Visible
 * shortly after page paint as a warm accent in the foreground stream. */
.figure--10 {
  --tint: rgba(168,55,42,0.70); --tint-soft: rgba(168,55,42,0.32);
  --blur: 11px; --scale: 1.0; --op: 0.45;
  --speed: 24s; --delay: -5s; --anim: walk-east;
  --bob-speed: 1.5s; --bob-delay: -0.4s; --bob-amount: 4px;
  bottom: -3%; height: 58%;
}

/* Mid-far layer — soft amber going west, mid-screen on first paint. */
.figure--11 {
  --tint: rgba(208,170,108,0.58); --tint-soft: rgba(208,170,108,0.25);
  --blur: 17px; --scale: 0.88; --op: 0.42;
  --speed: 30s; --delay: -10s; --anim: walk-west;
  --bob-speed: 1.8s; --bob-delay: -1.1s; --bob-amount: 3px;
  bottom: -1%; height: 56%;
}

/* Brand stack — sits in the TRANSOM BAND of the window frame, centered
 * horizontally over the door (the center panel between x=400 and x=800
 * of the SVG viewBox = 33%-67% of the hero width). Etched-sign vibe.
 *
 * Absolute positioning lets us pin it to the transom regardless of hero
 * height. The transom band is the top 25% of the hero; we position the
 * brand at ~10% from the top so it sits centered within that band.
 */
.hero__brand {
  position: absolute;
  /* Sits high enough that both the wordmark and the hangul beneath it
   * fully occupy the transom (top 33% of the hero, above the door rail). */
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;                                  /* above the window-frame overlay */
  display: flex; flex-direction: column; align-items: center;
  gap: 0;                          /* names sit flush — every px helps */
  text-align: center;
  padding: 0 var(--space-edge);
  width: 100%;
}
/* SVG wordmark — fills use `currentColor`, so the logo inherits the
 * parent's color. On the mid-tone theme this resolves to cream.
 */
.hero__title {
  margin: 0;
  display: block;
  /* Sized to fit the center transom panel with comfortable margin on
   * each side. */
  width: clamp(13.5rem, 31.5vw, 28rem);
  color: var(--color-cream);
  /* Mild cream glow — soft self-bloom, no color tint. */
  filter:
    drop-shadow(0 0 16px rgba(245, 239, 230, 0.28))
    drop-shadow(0 0 4px rgba(245, 239, 230, 0.20));
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 800ms 200ms var(--ease-out),
    transform 800ms 200ms var(--ease-out);
}
.hero__title img { display: block; width: 100%; height: auto; }
@starting-style {
  .hero__title { opacity: 0; transform: translateY(6px); }
}
.hero__hangul {
  font-family: var(--font-korean);
  font-weight: 400;                /* a touch bolder, more presence */
  /* Bumped again to anchor under the wordmark with confidence. */
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  letter-spacing: 0.45em;          /* matches the wide hangul setting on their door */
  color: var(--color-cream);     /* full cream — same as the wordmark */
  text-shadow:
    0 0 14px rgba(245, 239, 230, 0.32),
    0 0 4px rgba(245, 239, 230, 0.22);
  margin: 0;
  /* Entrance: 140ms after the logo — clean rhythm. */
  opacity: 1; transform: translateY(0);
  transition:
    opacity 800ms 340ms var(--ease-out),
    transform 800ms 340ms var(--ease-out);
}
@starting-style {
  .hero__hangul { opacity: 0; transform: translateY(6px); }
}

/* CTA + meta strip — own section directly below the hero. Sized to
 * roughly 8rem total so hero + this strip fit one viewport on standard
 * laptop sizes. Sits high (small top padding) so it feels connected
 * to the hero rather than orphaned far below it.
 *
 * A subtle wood-grain texture sits as a ::before behind the content —
 * vertical organic streaks suggesting the floorboards in the room,
 * leading the eye up to the doors above (the hero's window frame).
 */
.hero-cta {
  position: relative;
  isolation: isolate;
  background: var(--color-bg);
  min-height: 8rem;
  display: flex;
  align-items: center;
  padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  overflow: hidden;
}
.hero-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/assets/images/wood-grain.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Fade at the top edge so the grain dissolves into the hero above
   * instead of starting with a hard line. Stronger toward the bottom,
   * vanishing at the top — like floorboards receding toward the door. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
  opacity: 0.85;
}
.hero-cta__inner {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.125rem);
  text-align: center;
  opacity: 1; transform: translateY(0);
  transition:
    opacity 800ms 480ms var(--ease-out),
    transform 800ms 480ms var(--ease-out);
}
@starting-style {
  .hero-cta__inner { opacity: 0; transform: translateY(6px); }
}
.hero__cta {
  padding: 1rem 2.25rem;
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  background: transparent;
  border: 1px solid rgba(245, 239, 230, 0.32);  /* cream border on mid-tone */
  color: var(--color-cream);
  border-radius: var(--radius-pill);
  transition:
    transform var(--duration-press) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hero__cta:hover, .hero__cta:focus-visible {
    background: var(--color-cream);             /* cream fill */
    border-color: var(--color-cream);
    color: var(--color-bg);                     /* mid-tone text on cream */
    text-decoration: none;
    transform: translateY(-1px);
  }
}
.hero__cta:active { transform: scale(0.97); }

.hero__meta {
  display: flex;
  gap: 0.75rem;                                /* tighter than before */
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-uppercase);
  text-transform: uppercase;
  color: var(--color-cream-muted);
  flex-wrap: wrap; justify-content: center;
  align-items: center;
}
/* Dot separator before every non-first SPAN in the meta row. Scoped
 * to spans so the Hours anchor (mobile-only) doesn't get a leading
 * dot when it wraps to its own line. */
.hero__meta > span:not(:first-child)::before {
  content: "·";
  margin-right: 0.75rem;
  color: var(--color-accent);
  opacity: 0.7;
}

/* The Hours + Menu pill anchors are mobile-only. Their wrapping
 * container .hero__meta-buttons is hidden by default; the mobile
 * @media block at the end of this file shows the container as a
 * flex row so the two pills sit side by side. Conversely
 * .hero__meta-closed-line is the desktop version of the third slot
 * (the "Closed Tuesdays" text) and is hidden on mobile. */
.hero__meta-buttons { display: none; }

/* Smooth-scroll target offset for #hours so anchor jumps land below
 * the fixed header rather than under it. */
#hours { scroll-margin-top: 5rem; }

/* Reduce motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  .figure { animation: none; opacity: 0; }
}

/* Touch / coarse pointer — disable hover lift on the CTA */
@media (hover: none) {
  .hero__cta:hover { transform: none; }
}

/* ─── Story strip ─── */
.story {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.story__quote {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: var(--tracking-display);
  max-width: 26ch;
  color: var(--color-cream);
  margin: 0;
}
.story__attribution {
  margin-top: var(--space-md);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-uppercase);
  text-transform: uppercase;
  color: var(--color-accent);
}
.story__body { color: var(--color-cream-muted); max-width: 50ch; }

.story__layout {
  display: grid; gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .story__layout { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
}

/* ─── Signature dishes ─── */
.signatures {}
.signatures__head { margin-bottom: var(--space-xl); }
.signatures__title { margin-bottom: var(--space-sm); }
.signatures__sub { color: var(--color-cream-muted); }

.signature-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 640px) { .signature-grid { grid-template-columns: 1fr 1fr; } }

.signature-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex; flex-direction: column;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .signature-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
  }
}
.signature-card__image {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated) linear-gradient(135deg, rgba(232,169,95,0.12), rgba(31,45,58,0.18));
  margin-bottom: var(--space-md);
  position: relative;
  overflow: hidden;
}
.signature-card__image::after {
  /* Placeholder glyph until real photos arrive. Cards with a real
   * image (via the modifier classes below) suppress this glyph. */
  content: "남";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-korean);
  font-size: 4rem;
  color: rgba(232,169,95,0.18);
  font-weight: 300;
}

/* Photo-backed signature cards. Each modifier loads its dish photo
 * as a background-image and hides the "남" placeholder glyph. Drop
 * the four JPGs into assets/images/ with the filenames below. */
.signature-card__image--tteok-galbi {
  background:
    var(--color-bg-elevated)
    url("/assets/images/signature-tteok-galbi.jpg") center / cover no-repeat;
}
.signature-card__image--yangnyeom {
  background:
    var(--color-bg-elevated)
    url("/assets/images/signature-yangnyeom.jpg") center / cover no-repeat;
}
.signature-card__image--rolled-omelet {
  background:
    var(--color-bg-elevated)
    url("/assets/images/signature-rolled-omelet.jpg") center / cover no-repeat;
}
.signature-card__image--iced-persimmon {
  background:
    var(--color-bg-elevated)
    url("/assets/images/signature-iced-persimmon.jpg") center / cover no-repeat;
}
.signature-card__image--tteok-galbi::after,
.signature-card__image--yangnyeom::after,
.signature-card__image--rolled-omelet::after,
.signature-card__image--iced-persimmon::after {
  display: none;
}
.signature-card__name {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm); margin-bottom: var(--space-xs);
}
.signature-card__name-en {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: var(--weight-body-strong);
  color: var(--color-cream);
}
.signature-card__price {
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  font-size: var(--fs-small);
}
.signature-card__hangul {
  font-family: var(--font-korean);
  font-weight: 300;
  color: var(--color-cream-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--space-xs);
}
.signature-card__desc {
  color: var(--color-cream-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  margin: 0;
}
.signature-card__star {
  color: var(--color-accent);
  font-size: 0.875rem;
  margin-left: 0.4em;
}

/* ─── Menu (used on /menu page) ─── */
/* padding-block only so the .container class on the same element keeps
 * its horizontal --space-edge padding (the previous `padding: ... 0`
 * was nuking horizontal padding to zero and crowding content against
 * the viewport edges, especially on mobile). */
.menu-page { padding-block: var(--space-section); }
.menu-page__intro { max-width: 50ch; margin-bottom: var(--space-2xl); color: var(--color-cream-muted); }
.menu-legend { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-md); font-size: var(--fs-small); color: var(--color-cream-muted); }
.menu-legend__item { display: inline-flex; align-items: center; gap: var(--space-xs); }
.spice-dot {
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-spice);
}

.menu-cat {
  margin-bottom: var(--space-2xl);
}
.menu-cat__head {
  display: flex; align-items: baseline; gap: var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
}
.menu-cat__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display-strong);
  font-size: var(--fs-h2);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.menu-cat__hangul {
  font-family: var(--font-korean);
  font-weight: 300;
  color: var(--color-cream-muted);
  font-size: var(--fs-body);
}
.menu-cat__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
@media (min-width: 720px) { .menu-cat__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-md) var(--space-2xl); } }

.menu-item { padding: var(--space-sm) 0; }
.menu-item__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm); margin-bottom: 0.25rem;
}
.menu-item__name { font-weight: var(--weight-body-strong); color: var(--color-cream); }
.menu-item__name-hangul {
  font-family: var(--font-korean);
  font-weight: 300;
  color: var(--color-cream-muted);
  font-size: 0.9em;
  margin-left: 0.4em;
}
.menu-item__price {
  font-variant-numeric: tabular-nums;
  color: var(--color-cream);
  white-space: nowrap;
}
.menu-item__price-alt {
  font-size: var(--fs-tiny);
  color: var(--color-cream-muted);
  margin-left: 0.4em;
}
.menu-item__desc {
  color: var(--color-cream-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  margin: 0;
}
.menu-item__tags { display: inline-flex; gap: var(--space-sm); margin-left: 0.4em; }
.menu-tag {
  font-size: var(--fs-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-tag-bg);
  color: var(--color-tag-fg);
}
.menu-tag--spice {
  background: transparent; padding: 0.125rem 0;
  display: inline-flex; align-items: center; gap: 0.18rem;
}
.menu-tag--vegetarian, .menu-tag--vegan, .menu-tag--gf, .menu-tag--caffeine-free {
  background: rgba(180, 220, 180, 0.10);
  color: rgba(220, 240, 220, 0.9);
}
.menu-tag--signature {
  background: transparent;
  color: var(--color-accent);
  font-size: 0.875rem;
  padding: 0;
}

/* ─── Menu page — simple, contained ────────────────────────────────
 * Strips the previous decorative pass back to a quiet printed-menu
 * card. No motion, no hover effects, no decorative glyphs. The menu
 * sits in a slightly lighter taupe surface so it reads as a card
 * resting on the page. Two functional carryovers from the home page
 * survive: classic leader dots between item name and price, and the
 * wood-grain CTA strip at the bottom that mirrors the home page.
 * ───────────────────────────────────────────────────────────────── */

/* Page header — eyebrow, title, intro, legend. Plain, no decoration. */
.menu-page__head { margin-bottom: var(--space-xl); }
.menu-page__head h1 { margin: 0 0 var(--space-md); }

/* Section quicknav — mobile only (the desktop @media block at top of
 * .menu-quicknav hides it by default; the mobile @media at the end
 * of this file flips it on). When on, it sits sticky below the
 * fixed site header so users can jump between menu categories. */
.menu-quicknav { display: none; }
.menu-quicknav__list {
  display: flex;
  gap: 1.25rem;
  margin: 0; padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.menu-quicknav__list::-webkit-scrollbar { display: none; }
.menu-quicknav__list li { flex-shrink: 0; scroll-snap-align: start; }
.menu-quicknav__list a {
  display: inline-block;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--color-cream-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.25rem 0.1rem;
  border-bottom: 1px solid transparent;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    transform var(--duration-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu-quicknav__list a:hover,
  .menu-quicknav__list a:focus-visible { color: var(--color-cream); }
}
.menu-quicknav__list a:active { transform: scale(0.97); }
.menu-quicknav__list a.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* The card surface itself — slightly lighter taupe than the page bg,
 * subtle warm border, generous inner padding. No shadow (would feel
 * showy against the moody bg); the contrast in surface tone alone is
 * enough to make the card read as lifted. */
.menu-board {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.25rem);
}
.menu-board > .menu-cat:last-of-type { margin-bottom: 0; }

/* Mid-card section divider for "Drinks" — a top rule + centered
 * title. No candle, no flourish — just a quiet section break. */
.menu-board__divider {
  border-top: 1px solid var(--color-rule);
  margin: var(--space-2xl) 0 var(--space-xl);
  padding-top: var(--space-xl);
}
.menu-board__divider h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--weight-display);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0;
  color: var(--color-cream);
}

/* Hangul on section heads — pushed to the right edge. */
.menu-cat__hangul { margin-left: auto; }

/* Item rows — classic menu leader dots between name and price.
 * The dotted line is a flex pseudo on .menu-item__head with
 * order:2 so it sits between name (default order) and price
 * (order:3). The dots match the warm cream linework. */
.menu-item__head { gap: 0; }
.menu-item__head::before {
  content: "";
  flex: 1 1 auto;
  order: 2;
  align-self: end;
  margin: 0 0.5rem 0.32em;
  min-width: 1rem;
  height: 0;
  border-bottom: 1px dotted rgba(245, 239, 230, 0.22);
}
.menu-item__price { order: 3; }

/* Bottom CTA — reuses .hero-cta wood-grain block. The menu-page-cta
 * modifier just stacks the buttons in a centered row instead of the
 * column layout used on the home page. */
.menu-page-cta__inner {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* ─── Gallery (placeholder grid) ─── */
.gallery-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-tile {
  aspect-ratio: 1/1;
  background:
    radial-gradient(circle at 30% 20%, rgba(232,169,95,0.16), transparent 50%),
    linear-gradient(135deg, var(--color-bg-soft), var(--color-bg-elevated));
  border-radius: var(--radius-sm);
  position: relative;
}
.gallery-tile--tall { aspect-ratio: 1/1.4; }
.gallery-tile::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(232,169,95,0.06), transparent 70%);
}

/* ─── Visit ─── */
.visit-grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 720px) { .visit-grid { grid-template-columns: 1fr 1fr; } }

.visit-block { display: flex; flex-direction: column; gap: var(--space-md); }
.visit-block__label {
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-uppercase);
  text-transform: uppercase;
  color: var(--color-accent);
}
.visit-block__value {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h3);
  color: var(--color-cream);
}
.visit-block__value a { color: inherit; }
.visit-block__value a:hover { color: var(--color-accent); text-decoration: none; }

.hours-table { font-variant-numeric: tabular-nums; line-height: 1.7; color: var(--color-cream-muted); }
.hours-table dt { display: inline-block; min-width: 6.5em; color: var(--color-cream); }
.hours-table dd { display: inline; margin: 0; }
.hours-row { display: block; }
.hours-row--today dt, .hours-row--today dd { color: var(--color-accent); }

/* ─── Footer ────────────────────────────────────────────────────────
 * Directory-style footer (Menu / Socials / Location) sitting on a
 * slightly darker taupe surface, with a giant NAMDO wordmark
 * anchoring the bottom edge of the page. The wordmark fills the
 * viewport width; overflow:hidden + a small downward translate clip
 * the bottom of the letters so the wordmark reads as oversized — the
 * same "logo bigger than the page" cue used by the reference design.
 * ─────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-rule);
  padding: clamp(2rem, 4vw, 3.25rem) 0 0;
  color: var(--color-cream-muted);
  overflow: hidden;
}
.site-footer__inner {
  position: relative;
  z-index: 1;
}

/* Four-column directory: Menu / SNS / Visit / Hours.
 * Visit gets a touch more width since it carries multiple sub-rows
 * (address, phone, subway, reservations note + button). At narrow
 * desktops (<1000px) we drop to 2x2; below 720px everything stacks. */
.site-footer__directory {
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-footer__directory { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .site-footer__directory { grid-template-columns: 1fr 1fr 1.4fr 1.1fr; }
}

/* Column labels — hangul only, small and quiet. English equivalents
 * are in .sr-only spans for screen readers. The Korean script is the
 * visual mark; the column content below makes the meaning obvious. */
.site-footer__col-label {
  font-family: var(--font-korean);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-cream-muted);
  margin: 0 0 var(--space-md);
}
.site-footer__col-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 0.625rem;
}
.site-footer__col-list li {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--color-cream);
  letter-spacing: 0.01em;
}
.site-footer__col-list a {
  color: var(--color-cream);
  text-decoration: none;
  /* Hover/color change → ease (per polish framework). Press feedback
   * is on transform, instant feel. */
  transition:
    color 180ms ease,
    transform var(--duration-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__col-list a:hover,
  .site-footer__col-list a:focus-visible { color: var(--color-accent); }
}
.site-footer__col-list a:active { transform: scale(0.98); }

/* Visit column content — mixed address links, phone, notes, and
 * a "Book on Resy" button stacked vertically with tight spacing. */
.site-footer__col-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}
.site-footer__col-link {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--color-cream);
  text-decoration: none;
  transition:
    color 180ms ease,
    transform var(--duration-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__col-link:hover,
  .site-footer__col-link:focus-visible { color: var(--color-accent); }
}
.site-footer__col-link:active { transform: scale(0.98); }
.site-footer__col-note {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-cream-muted);
  margin: 0;
  max-width: 28ch;
}
/* Smaller, footer-specific button — the primary footer CTA shouldn't
 * compete with content. */
.site-footer__btn {
  padding: 0.5rem 1rem;
  font-size: var(--fs-tiny);
  margin-top: 0.25rem;
}

/* Hours table — uses the same data-hours / data-day / hours-row
 * hooks as the home page Visit section used (the today-highlight JS
 * still works without changes). Day name on the left, hours on the
 * right with tabular-nums so each row's hours align. */
.site-footer__hours {
  display: grid;
  gap: 0.3rem;
  margin: 0;
}
.site-footer__hours .hours-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.site-footer__hours dt {
  color: var(--color-cream-muted);
  font-weight: var(--weight-body);
}
.site-footer__hours dd {
  margin: 0;
  color: var(--color-cream);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.site-footer__hours .hours-row--today dt,
.site-footer__hours .hours-row--today dd { color: var(--color-accent); }

/* Legal strip — small, three cells, top-bordered */
/* Legal strip — now sits below the footer mark as the final row of
 * the page. Its border-top is the quiet separator between the logo
 * above and the legal text below. Padding-bottom provides the page
 * edge breathing room. */
.site-footer__legal-bar {
  margin-top: 0;
  padding-top: var(--space-lg);
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-uppercase);  /* match the col labels */
  color: var(--color-cream-muted);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 720px) {
  .site-footer__legal-bar {
    grid-template-columns: 1fr 1fr 1fr;
    text-align: left;
  }
  .site-footer__legal-bar > :nth-child(2) { text-align: center; }
  .site-footer__legal-bar > :nth-child(3) { text-align: right; }
}
.site-footer__legal-bar a {
  color: var(--color-cream-muted);
  text-decoration: none;
  transition: color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__legal-bar a:hover,
  .site-footer__legal-bar a:focus-visible { color: var(--color-cream); }
}

/* Footer mark — 남도 hangul leads (Korean root), NAMDO wordmark sits
 * below as the romanized partner at a restrained size. Centered.
 * No clipping or oversize trick — Korean traditional design favors
 * negative space and restraint. */
.site-footer__mark {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: 0 var(--space-edge) clamp(0.75rem, 2vw, 1.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25rem, 0.7vw, 0.5rem);
  text-align: center;
}
.site-footer__mark-hangul {
  font-family: var(--font-korean);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--color-cream);
}
.site-footer__mark-logo {
  display: block;
  width: clamp(4.5rem, 10vw, 7.5rem);
  height: auto;
  opacity: 0.7;
}

/* ─── Sticky mobile order bar ─── */
.mobile-order-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 0.75rem var(--space-md) calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-rule);
  gap: 0.5rem;
  z-index: 50;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
}
.mobile-order-bar .btn { flex: 1; padding: 0.875rem 0.75rem; font-size: var(--fs-small); }

/* ─── Mobile (≤720px) overrides ─────────────────────────────────────
 * Polish pass for narrow viewports. Targets:
 *   • Hero composition: hide oversized bistro tables (728px min would
 *     overflow a 375px viewport), shrink lanterns, lower the brand
 *     so it clears the fixed header instead of getting cropped.
 *   • Header: hide the inline Reserve / Order CTAs (the sticky
 *     bottom mobile-order-bar already covers those actions) and
 *     tighten the inner gap.
 *   • Menu page CTAs: stack to full-width columns for clear tap
 *     targets, no horizontal overflow.
 *   • Menu board: tighter inner padding to recover content width.
 *   • Footer hours table: tighter row gap so day-name + time fit
 *     comfortably in the narrow stacked column.
 *   • Sticky bottom mobile-order-bar shows; body gets padding-bottom
 *     so footer content isn't hidden behind it.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Bump --space-edge for mobile — gives every .container a bigger
   * horizontal inset (page header, menu board, hero brand, footer
   * mark). Tighter on small phones than the desktop clamp's min. */
  :root { --space-edge: 1.5rem; }

  /* Footer directory — compact 2-column layout on mobile. Short
   * columns (Menu + SNS) share row 1; Visit and Hours span full
   * width below. Reduces the total footer height significantly. */
  .site-footer__directory {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-md);
  }
  .site-footer__col:nth-child(n+3) { grid-column: 1 / -1; }

  /* Sticky bottom bar */
  .mobile-order-bar { display: flex; }
  body { padding-bottom: 4.5rem; }

  /* Header — drop the inline CTAs (covered by mobile-order-bar
   * + mobile menu); tighten the row's gap so the logo + hamburger
   * have room. */
  .site-nav__cta { display: none; }
  .site-header__inner { gap: var(--space-sm); }

  /* Hero — tables grow to mid-hero height on mobile (~50–60% tall via
   * the SVG's 680:410 aspect), and their left/right positions shift
   * outward from 16.67% / 83.33% to 8% / 92% so the bigger tables
   * don't crash their inner chairs into the door panel.
   *
   * Lanterns scale up in lockstep — the desktop lantern:table width
   * ratio is 22.5vw / 77vw ≈ 0.292, so mobile lanterns at 38vw match
   * mobile tables at 130vw. Lantern positions also move to 8% / 92%
   * so each lantern hangs directly over the candle on the table
   * below (candle ↔ lantern alignment is preserved on mobile even
   * though both have drifted off the window-frame mullion lines).
   *
   * Brand drops below the fixed header. The Resy CTA under the hero
   * is hidden — the sticky mobile-order-bar already covers Reserve. */
  .hero__table          { width: clamp(28rem, 130vw, 35rem); }
  .hero__table--left    { left: 8%; }
  .hero__table--right   { left: 92%; }
  .hero__lantern        {
    /* Lanterns hang lower — body center now sits around 55% of hero
     * height. Cord starts mid-hero and descends to the body. */
    top: 30%;
    width: clamp(9.5rem, 38vw, 14rem);
  }
  .hero__lantern--left  { left: 8%; }
  .hero__lantern--right { left: 92%; }

  /* Cord extension: a pair of thin cream lines from the top of the
   * hero (running up behind the fixed header haze) down to where
   * each lantern's SVG cord begins. Without this, the cord would
   * appear to start mid-air at top: 30% — with it, the cord reads as
   * a continuous string from the menu bar down to the lantern body.
   * Height matches .hero__lantern's top offset so the join is flush.
   * Pseudo positioned at the same 8% / 92% as each lantern. */
  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    top: 0;
    height: 30%;
    width: 1px;
    background: #f0e2cc;
    z-index: 3;
    pointer-events: none;
    transform: translateX(-50%);
  }
  .hero::before { left: 8%; }
  .hero::after  { left: 92%; }

  /* Drifting figures behind the storefront — 20% shorter on mobile
   * so they read at a more appropriate scale relative to the smaller
   * hero (was 60% of ambient height, now 48%). Width and depth-layer
   * scaling unchanged; only vertical height. */
  .figure { height: 48%; }
  .hero__brand          { top: 18%; }
  .hero__cta            { display: none; }

  /* Menu page bottom CTA — stack to full-width buttons. */
  .menu-page-cta__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .menu-page-cta__inner .btn { width: 100%; }

  /* Menu card — tighter inner padding on mobile so item rows
   * have more breathing room within the card. */
  .menu-board {
    padding: clamp(1.25rem, 5vw, 1.75rem) clamp(1rem, 4vw, 1.5rem);
  }

  /* ── Decrowd the mobile menu page ──
   * Drop the decorative leader dots between name and price — they
   * fight long-name wraps on narrow viewports. Shrink secondary type
   * (description, hangul, legend) so it recedes behind the item name.
   * Tighter page header + slimmer section heads + reduced inter-section
   * spacing so the menu reads as one continuous document. */

  /* Item rows — leader dots off; restore proper gap between name & price. */
  .menu-item__head { gap: var(--space-sm); }
  .menu-item__head::before { display: none; }
  .menu-item__desc {
    font-size: var(--fs-tiny);
    line-height: 1.45;
  }
  .menu-item__name-hangul { font-size: 0.78em; }

  /* Page header — smaller h1, tighter margin, quieter legend. */
  .menu-page__head { margin-bottom: var(--space-lg); }
  .menu-page__head h1 {
    font-size: 1.625rem;
    letter-spacing: -0.01em;
  }
  .menu-legend {
    font-size: var(--fs-tiny);
    gap: 0.75rem;
    letter-spacing: 0.04em;
  }

  /* Section heads + inter-section rhythm — slim down. */
  .menu-cat { margin-bottom: var(--space-xl); }
  .menu-cat__head {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  /* Drinks divider — tighter on mobile. */
  .menu-board__divider {
    margin: var(--space-xl) 0 var(--space-md);
    padding-top: var(--space-md);
  }
  .menu-board__divider h2 { font-size: var(--fs-h2); }

  /* Footer hours table — tighter gap between day-name and time
   * in the now-narrower stacked column. */
  .site-footer__hours .hours-row { gap: var(--space-xs); }

  /* Mobile-only section quicknav — sticky chip rail under the fixed
   * site header so the user can jump between menu categories on a
   * long-scrolling page. Same warm-haze treatment as the site header
   * so they read as a layered nav system. Edge-to-edge via negative
   * margins that cancel the .container's horizontal padding. */
  .menu-quicknav {
    display: block;
    position: sticky;
    top: 3.5rem;                                   /* clears fixed header */
    z-index: 5;
    margin: 0 calc(-1 * var(--space-edge)) var(--space-lg);
    padding: 0 var(--space-edge);
    background: rgba(79, 69, 64, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(245, 239, 230, 0.08);
    border-bottom: 1px solid rgba(245, 239, 230, 0.08);
  }
  .menu-quicknav__list { padding: 0.55rem 0; }

  /* Bigger scroll-margin on mobile so a tap on a quicknav chip lands
   * the section title clear of BOTH the fixed header (~3.5rem) and
   * the sticky quicknav rail below it (~3rem with padding). The
   * desktop default of 7.5rem assumes no rail; mobile needs more. */
  .menu-cat,
  .menu-cat__title { scroll-margin-top: 9.5rem; }

  /* ─── Header + mobile menu polish (mobile) ─────────────────────
   * Tighter header padding; hamburger as 44×44 hit target with
   * glyph driven by ::before so we can swap ☰ → ✕ on aria-expanded;
   * mobile menu list gets hairline dividers between items, generous
   * tap-target padding, current-page accent, and :active scale.
   * Header also gets explicit horizontal padding so the hangul logo
   * and hamburger button aren't flush against the viewport edges. */
  .site-header__inner { padding: 0.75rem 1.5rem; }
  .site-logo__hangul  { font-weight: 500; }

  .nav-toggle button {
    width: 2.75rem; height: 2.75rem;
  }
  .nav-toggle button::before {
    content: "☰";
    font-size: 1.125rem;
    line-height: 1;
  }
  .nav-toggle button[aria-expanded="true"]::before { content: "✕"; }

  .mobile-menu__list { gap: 0; }
  .mobile-menu__list li + li {
    border-top: 1px solid rgba(245, 239, 230, 0.06);
  }
  .mobile-menu__list a {
    display: block;
    padding: var(--space-sm) 0;
    font-size: 1.0625rem;
    line-height: 1.4;
    transition:
      color var(--duration-fast) var(--ease-out),
      transform var(--duration-press) var(--ease-out);
  }
  .mobile-menu__list a:active { transform: scale(0.98); }
  .mobile-menu__list a[aria-current="page"] { color: var(--color-accent); }

  /* CTA meta on mobile — stack into a column: address + neighborhood
   * lifted up and bolded as the primary info, with the Hours link
   * (anchor to #hours in footer) as a small pill button below. */
  .hero-cta {
    /* Bump the meta higher in the strip by giving more top padding
     * and less bottom. */
    padding-top: clamp(0.5rem, 1.5vw, 1rem);
    padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
    min-height: 0;
  }
  .hero__meta {
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
  }
  .hero__meta-address {
    /* fs-tiny on mobile so the address + neighborhood stay on a
     * single line at narrow viewports. Bigger sizes were wrapping. */
    font-size: var(--fs-tiny);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-cream);
    white-space: nowrap;
  }
  /* Hide the desktop "Closed Tuesdays" line on mobile; show the
   * Hours + Menu pills side by side on a new row below the address. */
  .hero__meta-closed-line { display: none; }
  .hero__meta-buttons {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }
  .hero__meta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(245, 239, 230, 0.32);
    border-radius: var(--radius-pill);
    font-size: var(--fs-tiny);
    letter-spacing: var(--tracking-uppercase);
    color: var(--color-cream);
    text-decoration: none;
    transition:
      color 180ms ease,
      border-color 180ms ease,
      transform var(--duration-press) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .hero__meta-link:hover,
    .hero__meta-link:focus-visible {
      color: var(--color-accent);
      border-color: var(--color-accent);
    }
  }
  .hero__meta-link:active { transform: scale(0.97); }
}