:root {
        --ink: #0c0b09;
        --ink2: #181613;
        --ink3: #232019;
        --forest: #1f3028;
        --forest2: #2b4035;
        --moss: #3a5a42;
        --ember: #bf3b1a;
        --ember2: #d44d26;
        --gold: #b8943e;
        --gold2: #d4ad5a;
        --cream: #f2ece0;
        --cream2: #faf6ee;
        --fog: #8a8070;
        --fog2: #b0a490;
        --flag-cream: oklch(0.97 0.012 82);
        --flag-ink: oklch(0.16 0.01 82);
        --rule: rgba(184, 148, 62, 0.22);
        --rule2: rgba(184, 148, 62, 0.45);
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --nav-h: 120px;
        --menu-sticky-h: 52px;
        /* F2B chat empty-state brand mark (companion-structure brief 08 §B):
           the seal, faint, behind the first-open welcome. The platform
           widget reads --f2b-chat-empty-ornament; the seal asset URL is
           rewritten to its content-addressed path at import. */
        --f2b-chat-empty-ornament: url("d3e4f8d3991deb21c7b42dca26f03842bf4db7a9d33f3d5a601c319186ca3a86.png");
        --f2b-chat-empty-ornament-opacity: 0.07;
        --f2b-chat-empty-ornament-size: min(62%, 240px);
        /* Persona voice in the chat panel (rich-replies brief 09 § D): the
           "The pitmaster" title takes goban's Playfair display face so it
           reads as the persona, not a form label. Playfair is already loaded
           in this bundle; the platform widget reads --f2b-widget-display-font
           (default inherit), so this is theme CSS only — no platform branch. */
        --f2b-widget-display-font: "Playfair Display", serif;
        /* Condensed uppercase label voice for platform widget chrome (menu
           eyebrows / badges / meta), matching goban's section kickers. The
           platform contract reads --f2b-widget-label-font (default inherit), so
           this is theme CSS only — no platform branch. */
        --f2b-widget-label-font: "Barlow Condensed", sans-serif;

      /* The page's ONE content column and ONE side gutter. Every band and
         every column below expresses width through these two and nothing
         else, so the numbers cannot drift apart the way 1100 / 1004 / 1104
         did. --gutter is retuned once, at the 960px breakpoint; no section
         restates it. */
      --content-max: 1100px;
      --gutter: 48px;
    }
      /* The platform widget (v1.css) binds --f2b-chat-empty-ornament, but a
         url() inside a custom property resolves relative to the CONSUMING
         stylesheet, and the importer collapses by-hash url()s to bare
         same-directory filenames (correct for refs inside this stylesheet).
         Re-bind the ornament image here, in goban's own served stylesheet,
         so the seal's bare filename resolves to its by-hash sibling. Opacity
         + size still flow through the platform hook untouched. */
      .f2b-widget__chat-empty-ornament {
        background-image: var(--f2b-chat-empty-ornament) !important;
      }
      /* Chat thinking indicator — goban grill-steam theming (round 3 item
         10). The platform's typing_dots variant renders three neutral dot
         <span>s; goban restyles that shared slot into steam: three slim
         ember-to-gold wisps rising and fading over a faint grill bar. Pure
         theme CSS (transform/opacity only — GPU contract), no widget fork.
         The `.f2b-sidebar-overlay` ancestor outranks the platform dot rules
         (v1.css loads after this sheet, so equal specificity would lose).
         Always animates: goban opts out of reduced motion (item 9). */
      .f2b-sidebar-overlay .f2b-widget__chat-typing[data-f2b-thinking="typing_dots"] {
        position: relative;
        gap: 0.45rem;
        align-items: flex-end;
        padding: 0.5rem 1rem 0.85rem;
        min-width: 3.6rem;
        justify-content: center;
      }
      /* The grill bar the steam rises from: a hairline ember-gold gradient
         with a soft heat glow. Static — the wisps carry the motion. */
      .f2b-sidebar-overlay .f2b-widget__chat-typing[data-f2b-thinking="typing_dots"]::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0.5rem;
        width: 2.6rem;
        height: 3px;
        border-radius: 999px;
        transform: translateX(-50%);
        background: linear-gradient(
          90deg,
          transparent,
          var(--ember) 30%,
          var(--gold2) 50%,
          var(--ember) 70%,
          transparent
        );
        box-shadow: 0 0 7px rgba(191, 59, 26, 0.55);
        opacity: 0.85;
      }
      .f2b-sidebar-overlay .f2b-widget__chat-typing[data-f2b-thinking="typing_dots"] span {
        width: 3px;
        height: 1.05rem;
        margin-bottom: 0.35rem;
        border-radius: 999px;
        background: linear-gradient(
          to top,
          var(--ember) 0%,
          rgba(212, 173, 90, 0.5) 65%,
          transparent 100%
        );
        opacity: 0;
        transform-origin: 50% 100%;
        animation: goban-steam-rise 2.2s ease-in-out infinite;
      }
      .f2b-sidebar-overlay .f2b-widget__chat-typing[data-f2b-thinking="typing_dots"] span:nth-child(2) {
        height: 1.3rem;
        animation-delay: -1.47s;
      }
      .f2b-sidebar-overlay .f2b-widget__chat-typing[data-f2b-thinking="typing_dots"] span:nth-child(3) {
        height: 0.95rem;
        animation-delay: -0.73s;
      }
      /* Mid-stream stall: the steam banks — slower cycle, patient not busy
         (matches the platform stall grammar). */
      .f2b-sidebar-overlay .f2b-widget__chat-typing--stall[data-f2b-thinking="typing_dots"] span {
        animation-duration: 3.6s;
      }
      @keyframes goban-steam-rise {
        0% {
          opacity: 0;
          transform: translate(0, 0.4rem) scaleY(0.5);
        }
        30% {
          opacity: 0.9;
          transform: translate(0.02rem, -0.05rem) scaleY(1);
        }
        65% {
          opacity: 0.35;
          transform: translate(-0.06rem, -0.42rem) scaleY(1.12);
        }
        100% {
          opacity: 0;
          transform: translate(0.05rem, -0.75rem) scaleY(1.2);
        }
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: auto;
      }
      body {
        font-family: "Barlow", sans-serif;
        background: var(--ink);
        color: var(--cream);
        font-weight: 300;
        line-height: 1.6;
        overflow-x: hidden;
        position: relative;
      }
      body.mobile-menu-open {
        overflow: hidden;
      }
      body::before {
        content: "";
        position: fixed;
        inset: -12%;
        z-index: 0;
        pointer-events: none;
        background:
          linear-gradient(
            115deg,
            rgba(184, 148, 62, 0.04),
            transparent 32%,
            rgba(31, 48, 40, 0.1) 66%,
            transparent
          ),
          repeating-linear-gradient(0deg, rgba(250, 246, 238, 0.018) 0 1px, transparent 1px 5px);
        mix-blend-mode: screen;
        opacity: 0.55;
        animation: grainShift 16s steps(5, end) infinite;
      }

      a:focus-visible,
      button:focus-visible,
      input:focus-visible {
        outline: 2px solid var(--gold2);
        outline-offset: 4px;
      }

      /* ─── ANIMATIONS ─── */
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(28px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes scaleIn {
        from {
          opacity: 0;
          transform: scale(0.94);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      @keyframes emberBreath {
        0%,
        100% {
          opacity: 0.42;
          transform: translate3d(0, 0, 0) scale(1);
        }
        50% {
          opacity: 0.68;
          transform: translate3d(0, -12px, 0) scale(1.03);
        }
      }
      @keyframes lightSweep {
        0% {
          transform: translateX(-120%) skewX(-18deg);
        }
        100% {
          transform: translateX(140%) skewX(-18deg);
        }
      }
      @keyframes grainShift {
        0%,
        100% {
          transform: translate(0, 0);
        }
        25% {
          transform: translate(-1%, 1%);
        }
        50% {
          transform: translate(1%, -1%);
        }
        75% {
          transform: translate(-0.5%, -0.5%);
        }
      }

      /* ─── PHONE COMPOSITING BUDGET ───
         The ambient desktop layers are the constant-stutter generators on
         phone GPUs: the fixed full-viewport grain (mix-blend-mode forces a
         re-composite of everything beneath on every scroll frame), the
         breathing blurred hero glow, and per-card backdrop blurs on the
         menu. Width-gated (a performance budget, not a motion preference —
         deliberately independent of prefers-reduced-motion/force-motion). */
      @media (max-width: 768px) {
        body::before {
          display: none;
        }
        .hero::before {
          animation: none;
          opacity: 0.55;
        }
        .set-card,
        .drink-category {
          backdrop-filter: none;
        }
      }

      /* Scroll-triggered reveal */
      .reveal {
        opacity: 0;
        transform: translateY(32px);
        transition:
          opacity 0.7s var(--ease-out),
          transform 0.7s var(--ease-out);
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-left {
        opacity: 0;
        transform: translateX(-32px);
        transition:
          opacity 0.7s var(--ease-out),
          transform 0.7s var(--ease-out);
      }
      .reveal-left.visible {
        opacity: 1;
        transform: translateX(0);
      }
      .reveal-right {
        opacity: 0;
        transform: translateX(32px);
        transition:
          opacity 0.7s var(--ease-out),
          transform 0.7s var(--ease-out);
      }
      .reveal-right.visible {
        opacity: 1;
        transform: translateX(0);
      }
      .reveal-scale {
        opacity: 0;
        transform: scale(0.93);
        transition:
          opacity 0.65s var(--ease-out),
          transform 0.65s var(--ease-out);
      }
      .reveal-scale.visible {
        opacity: 1;
        transform: scale(1);
      }
      .stagger > * {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.5s var(--ease-out),
          transform 0.5s var(--ease-out);
      }
      .stagger.visible > *:nth-child(1) {
        opacity: 1;
        transform: none;
        transition-delay: 0s;
      }
      .stagger.visible > *:nth-child(2) {
        opacity: 1;
        transform: none;
        transition-delay: 0.1s;
      }
      .stagger.visible > *:nth-child(3) {
        opacity: 1;
        transform: none;
        transition-delay: 0.2s;
      }
      .stagger.visible > *:nth-child(4) {
        opacity: 1;
        transform: none;
        transition-delay: 0.3s;
      }
      .stagger.visible > *:nth-child(5) {
        opacity: 1;
        transform: none;
        transition-delay: 0.4s;
      }
      .stagger.visible > *:nth-child(6) {
        opacity: 1;
        transform: none;
        transition-delay: 0.5s;
      }

      /* ─── ORNATE CORNER FRAME ─── */
      .ornate-frame {
        position: relative;
        border: 1px solid rgba(184, 148, 62, 0.35);
        padding: 0;
      }
      .ornate-frame::before,
      .ornate-frame::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 24px;
        border-color: var(--gold);
        border-style: solid;
        z-index: 10;
      }
      .ornate-frame::before {
        top: -1px;
        left: -1px;
        border-width: 2px 0 0 2px;
      }
      .ornate-frame::after {
        top: -1px;
        right: -1px;
        border-width: 2px 2px 0 0;
      }
      .ornate-frame-bottom {
        position: relative;
      }
      .ornate-frame-bottom::before,
      .ornate-frame-bottom::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 24px;
        border-color: var(--gold);
        border-style: solid;
        bottom: -1px;
        z-index: 10;
      }
      .ornate-frame-bottom::before {
        left: -1px;
        border-width: 0 0 2px 2px;
      }
      .ornate-frame-bottom::after {
        right: -1px;
        border-width: 0 2px 2px 0;
      }

      /* ─── NAV ─── */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 48px 14px;
        background: rgba(12, 11, 9, 0.98);
        border-bottom: 1px solid var(--rule);
        transition: border-color 0.3s;
      }
      .nav-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 20px;
        margin-bottom: 4px;
      }
      .nav-actions {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .nav-connect {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--fog2);
        text-decoration: none;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.12em;
        transition: color 0.2s var(--ease-out);
      }
      .nav-connect:hover {
        color: var(--gold2);
      }
      /* Top row: logo + wordmark side by side */
      .nav-brand {
        display: flex;
        align-items: center;
        gap: 14px;
        text-decoration: none;
        cursor: pointer;
      }
      .nav-bi {
        height: 56px;
        object-fit: contain;
        transition:
          transform 0.3s,
          filter 0.3s;
        filter: drop-shadow(0 0 12px rgba(191, 59, 26, 0.15));
      }
      .nav-brand:hover .nav-bi {
        transform: scale(1.03);
      }
      /* Bottom row: tabs + book button */
      .nav-bottom {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        border-top: 1px solid rgba(184, 148, 62, 0.12);
        padding-top: 12px;
      }
      .nav-tabs {
        display: flex;
        gap: 0;
        justify-content: center;
      }
      .nav-tab {
        background: none;
        border: none;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--fog);
        padding: 10px 26px;
        cursor: pointer;
        transition: color 0.2s;
        text-decoration: none;
        display: inline-block;
        position: relative;
        white-space: nowrap;
      }
      .nav-tab::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 20px;
        right: 20px;
        height: 2px;
        background: var(--ember);
        transform: scaleX(0);
        transition: transform 0.25s;
      }
      .nav-tab:hover {
        color: var(--cream);
      }
      .nav-tab.active {
        color: var(--cream2);
      }
      .nav-tab.active::after {
        transform: scaleX(1);
      }
      .nav-hire {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        background: transparent;
        color: var(--ember);
        border: 1px solid rgba(191, 59, 26, 0.45);
        padding: 5px 12px;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition:
          border-color 0.2s,
          color 0.2s;
        white-space: nowrap;
      }
      .nav-hire:hover {
        border-color: var(--ember);
        color: var(--ember2);
      }
      /* Hiring/chat pills: icon buttons are a hamburger-width surface
         (≤960px); desktop keeps the text pills. .f2b-nav-item-* are
         the platform-emitted chat-trigger twins of .nav-pill-*. */
      .nav-hire .nav-pill-icon,
      .nav-hire .f2b-nav-item-icon {
        display: none;
      }
      /* CHAT WITH US is the house signature — it takes the hero
         .btn-fill treatment at nav scale (filled ember + glow) so it
         reads as the primary CTA next to the outlined WE'RE HIRING,
         at every width. The runtime trigger carries data-f2b="chat"
         in the served HTML (pre-hydration), so the attribute is a
         stable styling hook. */
      .nav-actions a[data-f2b="chat"] {
        background: var(--ember);
        color: var(--cream2);
        border-color: var(--ember);
        box-shadow: 0 6px 18px rgba(191, 59, 26, 0.35);
        transition:
          background 0.2s,
          box-shadow 0.2s,
          transform 0.15s;
      }
      .nav-actions a[data-f2b="chat"]:hover {
        background: var(--ember2);
        border-color: var(--ember2);
        color: var(--cream2);
        transform: translateY(-1px);
        box-shadow: 0 9px 24px rgba(191, 59, 26, 0.45);
      }
      .nav-actions a[data-f2b="chat"]:focus-visible,
      [data-f2b-menu-drawer] a[data-f2b="chat"]:focus-visible {
        outline: 2px solid var(--gold2);
        outline-offset: 2px;
      }
      @media (min-width: 900px) {
        .nav-connect-label {
          display: inline !important;
        }
      }

      /* ─── PAGES ─── */
      .page {
        display: none;
        min-height: 100vh;
        padding-top: 180px;
        position: relative;
        overflow-x: clip;
        z-index: 1;
      }
      .page.active {
        display: block;
      }
      .page.fade-in {
        animation: pageFadeIn 0.25s ease both;
      }
      @keyframes pageFadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* ─── HOME HERO ─── */
      .hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 100px 24px 80px;
        overflow: hidden;
      }
      .hero::before {
        content: "";
        position: absolute;
        inset: -20% -10%;
        z-index: 1;
        pointer-events: none;
        background:
          radial-gradient(ellipse 80% 38% at 50% 105%, rgba(191, 59, 26, 0.36), transparent 68%),
          linear-gradient(90deg, transparent 0%, rgba(184, 148, 62, 0.09) 48%, transparent 100%);
        filter: blur(2px);
        animation: emberBreath 7s ease-in-out infinite;
      }
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
          linear-gradient(
            90deg,
            rgba(12, 11, 9, 0.58),
            transparent 22%,
            transparent 78%,
            rgba(12, 11, 9, 0.58)
          ),
          repeating-linear-gradient(90deg, rgba(250, 246, 238, 0.018) 0 1px, transparent 1px 110px);
        opacity: 0.7;
      }
      /* Dark cinematic overlay on the hero background */
      .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(
            to bottom,
            rgba(12, 11, 9, 0.45) 0%,
            rgba(12, 11, 9, 0.25) 40%,
            rgba(12, 11, 9, 0.55) 80%,
            rgba(12, 11, 9, 0.85) 100%
          ),
          radial-gradient(ellipse 70% 50% at 50% 60%, rgba(191, 59, 26, 0.08) 0%, transparent 70%);
      }
      .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
          radial-gradient(ellipse 55% 45% at 50% 85%, rgba(31, 48, 40, 0.7) 0%, transparent 65%),
          radial-gradient(ellipse 90% 55% at 50% 100%, rgba(191, 59, 26, 0.1) 0%, transparent 55%),
          var(--ink);
      }
      /* Calligraphy brush stroke accents, hero copies kept for z-index stacking inside hero */
      .hero-brush-left,
      .hero-brush-right {
        display: none; /* replaced by global fixed layer below */
      }
      /* ─── GLOBAL FIXED BRUSH STROKES ─── */
      .global-brush-left,
      .global-brush-right {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 5;
        pointer-events: none;
        opacity: 0.006;
        animation: fadeIn 2s ease 0.5s both;
      }
      .global-brush-left {
        left: 0;
        width: 30%;
        background: url("d89063bb119683a9f5a5a723159fa37a5feaa6cf3384958717dc8aa358d7520d.png") left center / contain no-repeat;
      }
      .global-brush-right {
        right: 0;
        width: 35%;
        background: url("3ba8d725f262a9cc701b2f2390af350844e07c5269b8e6dca8b7bce9eead50ed.png") right bottom / contain no-repeat;
      }
      .hero-body {
        position: relative;
        z-index: 10;
        max-width: 850px;
        margin: 0 auto;
        animation: fadeUp 1s ease 0.1s both;
        padding: 60px 80px;
        text-shadow:
          0 20px 60px rgba(12, 11, 9, 0.72),
          0 2px 18px rgba(12, 11, 9, 0.8);
      }
      .hero-body::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: min(720px, 82vw);
        height: 1px;
        transform: translateX(-50%);
        background: linear-gradient(90deg, transparent, rgba(212, 173, 90, 0.82), transparent);
      }
      .hero-body::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 12px;
        width: min(560px, 70vw);
        height: 1px;
        transform: translateX(-50%);
        background: linear-gradient(90deg, transparent, rgba(184, 148, 62, 0.42), transparent);
      }
      .hero-seal {
        width: 90px;
        height: 90px;
        border-radius: 0;
        display: block;
        margin: 0 auto 28px;
        filter: drop-shadow(0 0 40px rgba(191, 59, 26, 0.5))
          drop-shadow(0 0 80px rgba(191, 59, 26, 0.25));
        animation: scaleIn 0.9s ease 0.2s both;
        transition:
          transform 0.4s,
          filter 0.4s;
        background: transparent;
      }
      .hero-seal:hover {
        transform: scale(1.06) rotate(-3deg);
        filter: drop-shadow(0 0 50px rgba(191, 59, 26, 0.65))
          drop-shadow(0 0 100px rgba(191, 59, 26, 0.35));
      }
      .hero-title-pre {
        display: flex;
        justify-content: center;
        gap: 1.2em;
        flex-wrap: wrap;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: clamp(13px, 1.5vw, 17px);
        letter-spacing: 0.55em;
        text-transform: uppercase;
        color: var(--fog);
        margin-bottom: 12px;
        animation: fadeIn 0.8s ease 0.6s both;
      }
      .hero-title-pre span {
        white-space: nowrap;
      }
      .hero-title {
        font-family: "DM Serif Display", "Playfair Display", serif;
        font-weight: 400;
        font-size: clamp(88px, 15vw, 168px);
        line-height: 0.88;
        letter-spacing: 0.06em;
        color: var(--cream2);
        margin-bottom: 12px;
        animation: fadeUp 1s ease 0.4s both;
        text-shadow:
          0 4px 0 rgba(12, 11, 9, 0.54),
          0 24px 80px rgba(12, 11, 9, 0.84);
      }
      .hero-title-rule {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 20px auto;
        max-width: 480px;
        animation: fadeIn 1s ease 0.9s both;
      }
      .hero-rule-line {
        flex: 1;
        height: 1px;
        background: var(--rule2);
      }
      .hero-rule-ornament {
        font-family: "Playfair Display", serif;
        font-size: 18px;
        color: var(--gold);
      }
      .hero-korean {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: clamp(15px, 2.2vw, 21px);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--fog2);
        margin-bottom: 8px;
        animation: fadeIn 0.8s ease 1s both;
      }
      .hero-meaning {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-style: italic;
        font-size: clamp(14px, 1.7vw, 19px);
        color: var(--gold2);
        margin-bottom: 44px;
        animation: fadeIn 0.8s ease 1.1s both;
      }
      .hero-meta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-bottom: 48px;
        flex-wrap: wrap;
        animation: fadeIn 0.8s ease 1.2s both;
      }
      .hero-meta-item {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 500;
        font-size: 13px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--fog2);
        padding: 0 22px;
      }
      .hero-meta-sep {
        color: var(--rule2);
        font-size: 16px;
      }
      .hero-ctas {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        animation: fadeUp 0.8s ease 1.3s both;
      }

      /* ─── BUTTONS ─── */
      .btn-fill {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        background: var(--ember);
        color: var(--cream2);
        border: none;
        padding: 14px 36px;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition:
          background 0.2s,
          transform 0.15s,
          box-shadow 0.2s;
        position: relative;
        overflow: hidden;
        box-shadow: 0 12px 32px rgba(191, 59, 26, 0.28);
      }
      .btn-fill::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(250, 246, 238, 0.22), transparent);
        transform: translateX(-120%) skewX(-18deg);
        transition: transform 0.45s;
      }
      .btn-fill:hover {
        background: var(--ember2);
        transform: translateY(-2px);
        box-shadow: 0 16px 44px rgba(191, 59, 26, 0.36);
      }
      .btn-fill:hover::after {
        animation: lightSweep 0.75s ease both;
      }
      .btn-outline {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        background: transparent;
        color: var(--cream);
        border: 1px solid var(--rule2);
        padding: 14px 36px;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition:
          border-color 0.2s,
          color 0.2s,
          transform 0.15s;
      }
      .btn-outline:hover {
        border-color: var(--gold2);
        color: var(--gold2);
        transform: translateY(-2px);
      }
      .btn-forest {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        background: var(--forest);
        color: var(--cream2);
        border: 1px solid var(--moss);
        padding: 14px 36px;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition:
          background 0.2s,
          color 0.2s,
          transform 0.15s;
      }
      .btn-forest:hover {
        background: var(--forest2);
        color: var(--gold2);
        transform: translateY(-2px);
      }

      /* ─── HOME ABOUT ─── */
      .home-about {
      background: var(--ink2); padding: 120px var(--gutter);
    }
      .home-about-inner {
      max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: start;
    }
      .about-label {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--ember);
      }
      .about-h2 {
        font-family: "Playfair Display", serif;
        font-weight: 900;
        font-size: clamp(44px, 5.5vw, 70px);
        line-height: 0.95;
        color: var(--cream2);
        margin-top: 14px;
      }
      .about-h2 em {
        font-style: italic;
        color: var(--gold2);
      }
      .about-body {
        font-size: 16px;
        color: var(--fog2);
        line-height: 2;
        margin-top: 32px;
      }
      .about-body p + p {
        margin-top: 22px;
      }
      .pull-quote {
        border: 1px solid rgba(184, 148, 62, 0.3);
        padding: 40px 44px;
        background: rgba(35, 32, 25, 0.8);
        margin-bottom: 40px;
        transition: border-color 0.3s;
        position: relative;
      }
      .pull-quote::before,
      .pull-quote::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        border-color: rgba(184, 148, 62, 0.6);
        border-style: solid;
      }
      .pull-quote::before {
        top: -1px;
        left: -1px;
        border-width: 2px 0 0 2px;
      }
      .pull-quote::after {
        top: -1px;
        right: -1px;
        border-width: 2px 2px 0 0;
      }
      .pull-quote:hover {
        border-color: rgba(184, 148, 62, 0.5);
      }
      .pull-quote-text {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-style: italic;
        font-size: clamp(18px, 2.3vw, 23px);
        color: var(--cream2);
        line-height: 1.6;
        margin-bottom: 18px;
      }
      .pull-quote-attr {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--fog2);
      }
      .story-inspiration {
        border: 1px solid rgba(184, 148, 62, 0.22);
        background: linear-gradient(135deg, rgba(31, 48, 40, 0.52), rgba(35, 32, 25, 0.72));
        padding: 32px 34px;
        margin-bottom: 40px;
        position: relative;
        overflow: hidden;
      }
      .story-inspiration::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 2px;
        background: linear-gradient(90deg, var(--ember), transparent 58%);
      }
      .story-inspiration-kicker {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--ember);
        margin-bottom: 12px;
      }
      .story-inspiration-title {
        font-family: "Playfair Display", serif;
        font-weight: 800;
        font-size: 24px;
        color: var(--cream2);
        line-height: 1.18;
        margin-bottom: 12px;
      }
      .story-inspiration-copy {
        font-size: 15px;
        color: var(--fog2);
        line-height: 1.85;
      }
      .story-callout {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin: 24px 0;
        padding: 18px 24px;
        border: 1px solid rgba(191, 59, 26, 0.26);
        background: linear-gradient(135deg, rgba(191, 59, 26, 0.08), rgba(35, 32, 25, 0.32));
      }
      .story-callout-mark {
        color: var(--ember);
        font-size: 20px;
        line-height: 1;
        margin-top: 2px;
      }
      .story-callout p {
        margin: 0;
        font-size: 15px;
        color: var(--cream);
        font-weight: 400;
        line-height: 1.7;
      }
      .facts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }
      .fact-box {
        border: 1px solid rgba(184, 148, 62, 0.2);
        padding: 28px 24px;
        position: relative;
        transition:
          border-color 0.25s,
          transform 0.25s;
        cursor: default;
        background: rgba(35, 32, 25, 0.4);
      }
      .fact-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 100%;
        background: var(--ember);
      }
      .fact-box:hover {
        border-color: rgba(184, 148, 62, 0.35);
        transform: translateY(-3px);
      }
      .fact-num {
        font-family: "Playfair Display", serif;
        font-weight: 800;
        font-size: 40px;
        color: var(--gold2);
        line-height: 1;
        margin-bottom: 8px;
      }
      .fact-label {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--fog2);
      }

      /* ─── MENU PAGE ─── */
      /* Sticky menu sub-nav */
      .menu-masthead {
      max-width: calc(var(--content-max) + var(--gutter) * 2); padding-inline: var(--gutter); margin: 0 auto; padding-block: 80px 0;
    }
      .menu-masthead-title {
        font-family: "Playfair Display", serif;
        font-weight: 900;
        font-size: clamp(48px, 7.5vw, 92px);
        color: var(--cream2);
        line-height: 0.9;
        margin-top: 10px;
        margin-bottom: 8px;
      }
      .menu-masthead-title em {
        font-style: italic;
        color: var(--gold2);
      }
      .menu-masthead-sub {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 500;
        font-size: 15px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--fog2);
        margin-bottom: clamp(16px, 2vw, 24px);
      }

      .menu-sticky-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background: rgba(12, 11, 9, 0.97);
        border-bottom: 1px solid var(--rule);
        display: none;
        transition: top 0.1s;
      }
      .menu-nav-bar {
      display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: calc(var(--content-max) + var(--gutter) * 2); padding-inline: var(--gutter); margin: 0 auto; scrollbar-width: none;
    }
      .menu-nav-bar::-webkit-scrollbar {
        display: none;
      }
      .menu-nav-tab {
        background: none;
        border: none;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--fog2);
        padding: 0 24px;
        height: var(--menu-sticky-h);
        cursor: pointer;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        transition:
          color 0.2s,
          border-color 0.2s;
        display: flex;
        align-items: center;
      }
      .menu-nav-tab:hover {
        color: var(--cream);
      }
      .menu-nav-tab.active {
        color: var(--cream2);
        border-bottom-color: var(--ember);
      }

      /* Menu sections, all visible and scrollable */
      .menu-sections-scroll {
      max-width: calc(var(--content-max) + var(--gutter) * 2); padding-inline: var(--gutter); margin: 0 auto;
    }
      .menu-sec {
        padding: 80px 0;
        border-bottom: 1px solid rgba(184, 148, 62, 0.15);
      }
      .menu-sec:first-child {
        padding-top: clamp(32px, 4vw, 44px);
      }
      .menu-sec:last-child {
        border-bottom: none;
      }
      .menu-sec-header {
        margin-bottom: 56px;
        position: relative;
      }
      .menu-sec-header::after {
        content: "";
        position: absolute;
        bottom: -28px;
        left: 0;
        width: 80px;
        height: 1px;
        background: rgba(184, 148, 62, 0.4);
      }
      .menu-sec-label {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--ember);
      }
      .menu-sec-h2 {
        font-family: "Playfair Display", serif;
        font-weight: 900;
        font-size: clamp(38px, 5.5vw, 68px);
        color: var(--cream2);
        line-height: 0.92;
        margin-top: 12px;
      }
      .menu-sec-h2 em {
        font-style: italic;
        color: var(--gold2);
      }
      .menu-sec-desc {
        font-size: 15px;
        color: var(--fog2);
        max-width: 580px;
        line-height: 1.95;
        margin-top: 20px;
      }
      .menu-value-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        margin-bottom: 34px;
        border: 1px solid rgba(184, 148, 62, 0.22);
        background: rgba(184, 148, 62, 0.16);
      }
      .menu-value-cell {
        background: linear-gradient(135deg, rgba(35, 32, 25, 0.94), rgba(24, 22, 19, 0.94));
        padding: 24px 26px;
        min-height: 124px;
      }
      .menu-value-kicker {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--ember);
        margin-bottom: 10px;
      }
      .menu-value-title {
        font-family: "Playfair Display", serif;
        font-weight: 800;
        font-size: 23px;
        color: var(--cream2);
        line-height: 1.2;
        margin-bottom: 8px;
      }
      .menu-value-copy {
        font-size: 14px;
        color: var(--fog2);
        line-height: 1.7;
      }

      /* ── Cut items ── */
      .cuts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
      }
      .cut {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 0;
        border-bottom: 1px solid rgba(184, 148, 62, 0.1);
        transition: background 0.2s;
      }
      .cut:hover {
        background: rgba(184, 148, 62, 0.03);
      }
      .cut:nth-child(odd) {
        padding-right: 52px;
      }
      .cut:nth-child(even) {
        padding-left: 52px;
        border-left: 1px solid rgba(184, 148, 62, 0.1);
      }
      .cut-name {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-size: 20px;
        color: var(--cream2);
        line-height: 1.2;
        margin-bottom: 6px;
      }
      .cut-kr {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.1em;
        color: var(--cream);
        margin-bottom: 5px;
      }
      .cut-note {
        font-size: 14px;
        color: var(--fog2);
        font-style: italic;
        line-height: 1.5;
      }
      .cut-tag {
        display: inline-block;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        background: rgba(191, 59, 26, 0.18);
        color: var(--ember2);
        padding: 3px 9px;
        margin-top: 7px;
      }
      .cut-price {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-size: 22px;
        color: var(--gold2);
        white-space: nowrap;
        padding-top: 2px;
        transition: color 0.2s;
      }
      .cut:hover .cut-price {
        color: var(--cream2);
      }

      /* ── Sets ── */
      .sets-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
      }
      .set-card {
        border: 1px solid rgba(184, 148, 62, 0.25);
        padding: 40px 36px;
        position: relative;
        transition:
          border-color 0.25s,
          transform 0.25s;
        background: rgba(35, 32, 25, 0.3);
        backdrop-filter: blur(5px);
      }
      .set-card:hover {
        border-color: rgba(184, 148, 62, 0.45);
        transform: translateY(-4px);
      }
      .set-card.star {
        border-color: rgba(191, 59, 26, 0.35);
      }
      .set-card.star::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--ember);
      }
      .set-card.anchor {
        background:
          linear-gradient(135deg, rgba(191, 59, 26, 0.16), transparent 42%), rgba(35, 32, 25, 0.42);
        box-shadow: 0 18px 48px rgba(12, 11, 9, 0.28);
      }
      .set-badge {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        background: var(--ember);
        color: var(--cream2);
        display: inline-block;
        padding: 4px 10px;
        margin-bottom: 16px;
      }
      .set-name {
        font-family: "Playfair Display", serif;
        font-weight: 800;
        font-size: 22px;
        color: var(--cream2);
        line-height: 1.15;
        margin-bottom: 4px;
      }
      .set-kr {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.1em;
        color: var(--cream);
        margin-bottom: 14px;
      }
      .set-desc {
        font-size: 14px;
        color: var(--fog2);
        line-height: 1.85;
        margin-bottom: 22px;
      }
      .set-foot {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding-top: 18px;
        border-top: 1px solid var(--rule);
      }
      .set-price {
        font-family: "Playfair Display", serif;
        font-weight: 800;
        font-size: 30px;
        color: var(--gold2);
      }
      .set-price-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .set-per {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--fog2);
      }
      .set-guests {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--fog2);
      }
      .set-advice {
        margin-top: 14px;
        font-family: "Barlow", sans-serif;
        font-size: 13px;
        color: var(--fog2);
        line-height: 1.55;
        font-style: italic;
      }

      /* ── Simple items (stews / sides) ── */
      .simple-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
      }
      .simple {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 0;
        border-bottom: 1px solid rgba(184, 148, 62, 0.1);
        transition: background 0.2s;
      }
      .simple:hover {
        background: rgba(184, 148, 62, 0.03);
      }
      .simple:nth-child(odd) {
        padding-right: 52px;
      }
      .simple:nth-child(even) {
        padding-left: 52px;
        border-left: 1px solid rgba(184, 148, 62, 0.1);
      }
      .simple-name {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-size: 18px;
        color: var(--cream2);
        margin-bottom: 5px;
      }
      .simple-kr {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.08em;
        color: var(--cream);
        margin-bottom: 3px;
      }
      .simple-note {
        font-size: 14px;
        color: var(--fog2);
        font-style: italic;
        line-height: 1.5;
      }
      .simple-price {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-size: 20px;
        color: var(--gold2);
        white-space: nowrap;
      }

      /* ── Drinks section ── */
      .drinks-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 28px;
      }
      .drink-category {
        border: 1px solid rgba(184, 148, 62, 0.25);
        padding: 32px 28px;
        transition:
          border-color 0.25s,
          transform 0.25s;
        background: rgba(35, 32, 25, 0.3);
        backdrop-filter: blur(5px);
      }
      .drink-category:hover {
        border-color: rgba(184, 148, 62, 0.45);
        transform: translateY(-3px);
      }
      .drink-cat-label {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--ember);
        margin-bottom: 12px;
      }
      .drink-cat-title {
        font-family: "Playfair Display", serif;
        font-weight: 800;
        font-size: 20px;
        color: var(--cream2);
        margin-bottom: 20px;
      }
      .drink-item {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(184, 148, 62, 0.08);
      }
      .drink-item:last-child {
        border-bottom: none;
      }
      .drink-name {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 500;
        font-size: 15px;
        color: var(--cream);
        letter-spacing: 0.05em;
      }
      .drink-note {
        font-size: 12px;
        color: var(--fog);
        margin-top: 2px;
        font-style: italic;
      }
      .drink-price {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-size: 17px;
        color: var(--gold2);
        white-space: nowrap;
      }
      .drink-price.included {
        color: var(--cream2);
        font-size: 15px;
      }
      .drink-placeholder-note {
        margin-top: 24px;
        padding: 16px 20px;
        border: 1px dashed rgba(184, 148, 62, 0.25);
        font-size: 13px;
        color: var(--fog);
        font-style: italic;
        line-height: 1.7;
      }

      .menu-footnote {
        margin-top: 44px;
        border: 1px solid var(--rule);
        padding: 16px 22px;
        background: linear-gradient(135deg, rgba(31, 48, 40, 0.32), rgba(24, 22, 19, 0.86));
        font-size: 14px;
        color: var(--fog2);
        font-style: italic;
        line-height: 1.8;
        position: relative;
      }
      .menu-footnote::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 20px;
        right: 20px;
        height: 1px;
        background: var(--forest2);
      }

      /* ─── PRIVATE DINING ─── */
      .private-header {
      background: var(--ink2); padding: 100px var(--gutter); text-align: center; border-bottom: 1px solid var(--rule);
    }
      .private-h1 {
        font-family: "Playfair Display", serif;
        font-weight: 900;
        font-size: clamp(52px, 7.5vw, 96px);
        color: var(--cream2);
        line-height: 0.9;
        margin-top: 14px;
      }
      .private-h1 em {
        font-style: italic;
        color: var(--gold2);
      }
      .private-lead {
        font-size: 15px;
        color: var(--fog2);
        max-width: 560px;
        margin: 28px auto 0;
        line-height: 1.95;
      }
      .private-options {
      max-width: calc(var(--content-max) + var(--gutter) * 2); padding-inline: var(--gutter); margin: 0 auto; padding-block: 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    }
      .priv-opt {
        border: 1px solid rgba(184, 148, 62, 0.25);
        padding: 56px 52px;
        transition:
          border-color 0.3s,
          transform 0.3s;
        background: rgba(35, 32, 25, 0.3);
        position: relative;
      }
      .priv-opt::before,
      .priv-opt::after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        border-color: rgba(184, 148, 62, 0.4);
        border-style: solid;
      }
      .priv-opt::before {
        top: -1px;
        left: -1px;
        border-width: 2px 0 0 2px;
      }
      .priv-opt::after {
        top: -1px;
        right: -1px;
        border-width: 2px 2px 0 0;
      }
      .priv-opt:hover {
        border-color: rgba(184, 148, 62, 0.45);
        transform: translateY(-4px);
      }
      .priv-tag {
        margin-bottom: 18px;
      }
      .priv-label {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--ember);
      }
      .priv-name {
        font-family: "Playfair Display", serif;
        font-weight: 900;
        font-size: 36px;
        color: var(--cream2);
        line-height: 1.05;
        margin-bottom: 24px;
      }
      .priv-name em {
        font-style: italic;
        color: var(--gold2);
      }
      .priv-desc {
        font-size: 14px;
        color: var(--fog2);
        line-height: 1.95;
        margin-bottom: 36px;
      }
      .priv-stats {
        display: flex;
        gap: 40px;
        padding: 24px 0;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        margin-bottom: 36px;
      }
      .priv-stat-val {
        font-family: "Playfair Display", serif;
        font-weight: 800;
        font-size: 36px;
        color: var(--gold2);
      }
      .priv-stat-key {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--fog2);
        margin-top: 4px;
      }

      /* ─── VISIT PAGE ─── */
      .visit-inner {
      max-width: calc(var(--content-max) + var(--gutter) * 2); padding-inline: var(--gutter); margin: 0 auto; padding-block: 100px;
    }
      .visit-h1 {
        font-family: "Playfair Display", serif;
        font-weight: 900;
        font-size: clamp(52px, 7vw, 88px);
        color: var(--cream2);
        line-height: 0.9;
        margin-bottom: 80px;
      }
      .visit-h1 em {
        font-style: italic;
        color: var(--gold2);
      }
      .visit-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
      }
      .visit-sec-label {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--ember);
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(184, 148, 62, 0.2);
        margin-bottom: 28px;
      }
      .visit-main {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-size: 20px;
        color: var(--cream2);
        line-height: 1.65;
        margin-bottom: 16px;
      }
      .visit-sub {
        font-size: 14px;
        color: var(--fog2);
        line-height: 1.9;
      }
      .hours-row {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid rgba(184, 148, 62, 0.1);
        transition: background 0.2s;
      }
      .hours-row:hover {
        background: rgba(184, 148, 62, 0.06);
      }
      .hours-day {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.1em;
        color: var(--fog2);
      }
      .hours-time {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: var(--cream2);
        letter-spacing: 0.05em;
      }

      /* ─── FOOTER ─── */
      footer {
        background: var(--forest);
        border-top: 1px solid rgba(184, 148, 62, 0.2);
        padding: 80px 48px 48px;
        position: relative;
      }
      footer::before,
      footer::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 24px;
        border-color: rgba(184, 148, 62, 0.3);
        border-style: solid;
        top: 0;
      }
      footer::before {
        left: -1px;
        border-width: 2px 0 0 2px;
      }
      footer::after {
        right: -1px;
        border-width: 2px 2px 0 0;
      }
      .footer-inner {
      max-width: var(--content-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px;
    }
      .footer-brand-row {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .footer-bi {
        height: 36px;
        object-fit: contain;
      }
      .footer-center {
        font-size: 13px;
        color: rgba(242, 236, 224, 0.45);
        text-align: center;
        line-height: 1.9;
      }
      .footer-links {
        display: flex;
        gap: 20px;
      }
      .footer-links a {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(242, 236, 224, 0.45);
        text-decoration: none;
        transition: color 0.2s;
      }
      .footer-links a:hover {
        color: var(--gold2);
      }
      .footer-copy {
      max-width: var(--content-max); margin: 20px auto 0; padding-top: 18px; border-top: 1px solid rgba(59, 90, 66, 0.35);
    }

      /* ─── CONSTRUCTION BANNER ─── */
      .construction-banner {
        width: 100%;
        padding: 0;
        overflow: hidden;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
      }
      .construction-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }

      /* ─── EXPERIENCE HIGHLIGHTS ─── */
      .highlights-section {
      max-width: calc(var(--content-max) + var(--gutter) * 2); padding-inline: var(--gutter); margin: 0 auto; padding-block: 100px 60px;
    }
      .highlights-header {
        text-align: center;
        margin-bottom: 60px;
      }
      .highlights-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        margin-bottom: 48px;
      }
      .highlight-card {
        border: 1px solid var(--rule);
        padding: 48px 40px;
        background: rgba(31, 48, 40, 0.15);
        transition:
          border-color 0.3s,
          background 0.3s;
      }
      .highlight-card:hover {
        border-color: var(--rule2);
        background: rgba(31, 48, 40, 0.25);
      }
      .highlight-icon {
        font-size: 36px;
        margin-bottom: 20px;
      }
      .highlight-title {
        font-family: "Bebas Neue", "Barlow Condensed", sans-serif;
        font-weight: 400;
        font-size: 24px;
        letter-spacing: 0.08em;
        color: var(--cream2);
        margin-bottom: 16px;
      }
      .highlight-desc {
        font-family: "Barlow", sans-serif;
        font-weight: 300;
        font-size: 15px;
        color: var(--fog2);
        line-height: 1.8;
      }
      .ventilation-photos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .vent-photo-item {
        overflow: hidden;
        border: 1px solid var(--rule);
      }
      .vent-photo {
        width: 100%;
        height: 280px;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
      }
      .vent-photo-item:hover .vent-photo {
        transform: scale(1.03);
      }
      .vent-photo-caption {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 500;
        font-size: 12px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--fog);
        padding: 12px 16px;
        border-top: 1px solid var(--rule);
      }

      /* ─── STOREFRONT GALLERY ─── */
      .storefront-section {
      max-width: calc(var(--content-max) + var(--gutter) * 2); padding-inline: var(--gutter); margin: 0 auto; padding-block: 100px 80px;
    }
      .storefront-header {
        text-align: center;
        margin-bottom: 60px;
      }
      .storefront-desc {
        font-family: "Barlow", sans-serif;
        font-weight: 300;
        font-size: 16px;
        color: var(--fog2);
        max-width: 600px;
        margin: 20px auto 0;
        line-height: 1.7;
      }
      .storefront-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .storefront-item {
        overflow: hidden;
        border: 1px solid var(--rule);
        position: relative;
      }
      .storefront-wide {
        grid-column: 1 / -1;
      }
      .storefront-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
        min-height: 280px;
      }
      .storefront-item:hover .storefront-photo {
        transform: scale(1.03);
      }

      /* ─── CALLIGRAPHY BANNER ─── */
      .calligraphy-banner {
        width: 100%;
        padding: 0;
        overflow: hidden;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        margin-bottom: 0;
      }
      .calligraphy-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
      /* ─── HERO TAGLINE ─── */
      .hero-tagline {
        font-family: "Barlow", sans-serif;
        font-weight: 300;
        font-size: clamp(15px, 1.8vw, 20px);
        letter-spacing: 0.12em;
        color: var(--fog);
        margin-top: 8px;
        margin-bottom: 24px;
        animation: fadeIn 0.8s ease 1.3s both;
      }
      /* ─── KOREAN MEANING BLOCK ─── */
      .hero-meaning-block {
        margin-bottom: 36px;
        animation: fadeIn 0.8s ease 1.1s both;
        text-align: center;
      }
      .hero-meaning-kr {
        font-family: "Barlow", sans-serif;
        font-weight: 400;
        font-size: clamp(16px, 2vw, 22px);
        color: var(--cream);
        letter-spacing: 0.05em;
        margin-bottom: 4px;
      }
      .hero-meaning-kr-detail {
        font-family: "Barlow", sans-serif;
        font-weight: 300;
        font-size: clamp(13px, 1.5vw, 17px);
        color: var(--fog);
        letter-spacing: 0.04em;
        margin-bottom: 10px;
      }
      .hero-meaning-en {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-style: italic;
        font-size: clamp(15px, 1.9vw, 21px);
        color: var(--gold2);
      }
      /* ─── WHY GOBAN SECTION ─── */
      .why-section {
      padding: 80px var(--gutter); background: linear-gradient(to bottom, var(--ink), var(--ink2), var(--ink));
    }
      .why-header {
        text-align: center;
        margin-bottom: 56px;
      }
      /* Segment breaker under a centered section heading — the hero's
         ✦ rule motif at section scale, hairlines fading outward. */
      .section-rule {
        display: flex;
        align-items: center;
        gap: 18px;
        max-width: 360px;
        margin: 30px auto 0;
      }
      .section-rule-line {
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--rule2));
      }
      .section-rule-line:last-child {
        background: linear-gradient(to left, transparent, var(--rule2));
      }
      .section-rule-ornament {
        font-family: "Playfair Display", serif;
        font-size: 16px;
        line-height: 1;
        color: var(--gold);
      }
      .why-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--content-max); margin: 0 auto;
    }
      .why-card {
        text-align: center;
        padding: 36px 20px;
        border: 1px solid var(--rule);
        background: rgba(242, 236, 224, 0.02);
        transition:
          background 0.3s,
          border-color 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .why-card:hover {
        background: rgba(242, 236, 224, 0.04);
        border-color: var(--rule2);
      }
      .why-icon {
        font-size: 36px;
        margin-bottom: 20px;
        filter: drop-shadow(0 0 12px rgba(191, 59, 26, 0.4));
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .why-icon svg {
        transition:
          transform 0.35s ease,
          filter 0.35s ease;
      }
      .why-card:hover .why-icon svg {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(184, 148, 62, 0.5));
      }
      .why-title {
        font-family: "Bebas Neue", "Barlow Condensed", sans-serif;
        font-size: 18px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--cream2);
        margin-bottom: 10px;
      }
      .why-desc {
        font-family: "Barlow", sans-serif;
        font-weight: 300;
        font-size: 14px;
        color: var(--fog);
        line-height: 1.6;
      }
      /* ─── EXPERIENCE SECTION ─── */
      .exp-section {
      padding: 80px var(--gutter); text-align: center; background: var(--ink); border-top: 1px solid var(--rule);
    }
      .exp-title {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-size: clamp(28px, 4vw, 44px);
        color: var(--cream2);
        line-height: 1.2;
        margin-bottom: 16px;
      }
      .exp-copy {
        font-family: "Barlow", sans-serif;
        font-weight: 300;
        font-size: clamp(15px, 1.6vw, 18px);
        color: var(--fog);
        max-width: 600px;
        margin: 0 auto 40px;
        line-height: 1.7;
      }
      /* ─── PHOTO PLACEHOLDER ─── */
      .photo-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        background: linear-gradient(135deg, var(--ink2), var(--ink3));
        border: 1px dashed var(--rule);
        color: var(--fog2);
        font-family: "Barlow Condensed", sans-serif;
        font-size: 14px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
      }
      .photo-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: var(--content-max); margin: 0 auto;
    }
      .photo-grid .photo-placeholder {
        min-height: 240px;
      }

      /* ─── RESPONSIVE ─── */
      /* ─── HAMBURGER MENU ─── */
      .nav-hamburger {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        width: 32px;
        height: 24px;
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
      }
      .nav-hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--cream2);
        border-radius: 1px;
        transition:
          transform 0.3s,
          opacity 0.3s;
      }
      .nav-hamburger.open span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
      }
      .nav-hamburger.open span:nth-child(2) {
        opacity: 0;
      }
      .nav-hamburger.open span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
      }
      .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 199;
        background: rgba(12, 11, 9, 0.97);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 40px 24px;
      }
      .mobile-menu.open {
        display: flex;
      }
      .mobile-menu a {
        font-family: "Bebas Neue", "Barlow Condensed", sans-serif;
        font-weight: 400;
        font-size: 32px;
        letter-spacing: 0.12em;
        color: var(--cream);
        text-decoration: none;
        padding: 14px 0;
        text-transform: uppercase;
        transition: color 0.2s;
      }
      .mobile-menu a:hover,
      .mobile-menu a.active {
        color: var(--gold2);
      }
      .mobile-menu .nav-hire {
        font-size: 16px;
        letter-spacing: 0.18em;
        margin-top: 0;
        padding: 13px 28px;
      }
      /* Drawer CHAT WITH US mirrors the nav treatment: a filled ember
         pill above the outlined hiring pill, breaking the signature
         CTA out of the plain link stack. Scoped to the import-stamped
         drawer attribute (NOT .mobile-menu): the importer renames the
         drawer class and re-keys .mobile-menu rules into `@layer
         tenant`, where this site's own unlayered `* { padding: 0 }`
         reset would beat them at any specificity. The attribute
         selector stays in the main (unlayered) sheet; the raw source
         has no chat trigger, so standalone fidelity loses nothing. */
      [data-f2b-menu-drawer] a[data-f2b="chat"] {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        background: var(--ember);
        color: var(--cream2);
        padding: 13px 28px;
        margin-top: 6px;
        box-shadow: 0 8px 24px rgba(191, 59, 26, 0.35);
      }
      [data-f2b-menu-drawer] a[data-f2b="chat"]:hover {
        background: var(--ember2);
        color: var(--cream2);
      }

      @media (max-width: 960px) {
      /* The gutter is retuned HERE and nowhere else. Every band and every
         self-contained column reads var(--gutter), so this one line moves
         all of them together. */
      :root {
        --gutter: 24px;
      }

        /* Nav */
        nav {
          padding: 14px 20px 10px;
          flex-direction: column;
          justify-content: center;
        }
        .nav-top {
          margin-bottom: 0;
          gap: 14px;
        }
        .nav-actions {
          gap: 12px;
          flex-shrink: 0;
        }
        .nav-connect-label {
          display: none !important;
        }
        /* WE'RE HIRING + CHAT WITH US collapse to icon buttons so the
           chat trigger stays visible beside the hamburger; the row no
           longer overflows, so the runtime's measured nav-yield safety
           net simply never fires here. */
        .nav-actions .nav-hire {
          padding: 6px;
        }
        .nav-actions .nav-hire .nav-pill-icon,
        .nav-actions .nav-hire .f2b-nav-item-icon {
          display: block;
        }
        .nav-actions .nav-hire .nav-pill-icon svg,
        .nav-actions .nav-hire .f2b-nav-item-icon svg {
          display: block;
          width: 18px;
          height: 18px;
        }
        .nav-actions .nav-hire .nav-pill-label,
        .nav-actions .nav-hire .f2b-nav-item-label {
          display: none;
        }
        .nav-brand {
          margin-bottom: 0;
        }
        .nav-bi {
          height: 36px;
        }
        .nav-bottom {
          display: none;
        }
        .nav-hamburger {
          display: flex;
          margin-left: 2px;
        }
        .page {
          padding-top: 80px;
        }

        /* Hero */
        .hero {
          min-height: 100vh;
          padding: 60px 16px 60px;
        }
        .hero-brush-left {
          width: 25%;
          opacity: 0.08;
        }
        .hero-brush-right {
          width: 28%;
          opacity: 0.08;
        }
        .hero-body {
          padding: 36px 24px;
          max-width: 100%;
        }
        .hero-seal {
          width: 70px;
          height: 70px;
        }
        .hero-title {
          font-size: clamp(56px, 14vw, 100px);
        }
        .hero-title-pre {
          font-size: 12px;
        }
        .hero-korean {
          font-size: 14px;
        }
        .hero-meaning {
          font-size: 13px;
          margin-bottom: 32px;
        }
        .hero-meta-item {
          font-size: 11px;
          padding: 0 12px;
        }
        .hero-ctas {
          flex-direction: column;
          align-items: center;
          gap: 10px;
        }
        .btn-fill,
        .btn-outline,
        .btn-forest {
          width: 100%;
          max-width: 280px;
          text-align: center;
        }

        /* Info strip */
        .banner-strip {
          grid-template-columns: 1fr;
          background: var(--rule);
        }
        .banner-cell {
          padding: 24px 20px;
        }

        /* About */
        .home-about {
      padding-block: 60px;
    }
        .home-about-inner {
          grid-template-columns: 1fr;
          gap: 48px;
        }
        .about-h2 {
          font-size: clamp(36px, 8vw, 56px);
        }
        .facts-grid {
          grid-template-columns: 1fr 1fr;
          gap: 12px;
        }

        /* Why Goban */
        .why-section {
      padding-block: 60px;
    }
        .why-grid {
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }

        /* Experience */
        .exp-section {
      padding-block: 60px;
    }
        .photo-grid {
          grid-template-columns: 1fr 1fr;
          gap: 4px;
        }

        /* Highlights */
        .highlights-section {
      padding-block: 60px 40px;
    }
        .highlights-grid {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        .highlight-card {
          padding: 32px 24px;
        }
        .ventilation-photos {
          grid-template-columns: 1fr;
        }
        .vent-photo {
          height: 200px;
        }

        /* Storefront */
        .storefront-section {
      padding-block: 60px 40px;
    }
        .storefront-grid {
          grid-template-columns: 1fr;
        }
        .storefront-wide {
          grid-column: auto;
        }
        .storefront-photo {
          min-height: 200px;
        }

        /* Menu */
        .menu-masthead,
        .menu-sections-scroll,
        .menu-nav-bar {

    }
        .menu-masthead-title {
          font-size: clamp(40px, 10vw, 72px);
        }
        .menu-value-strip {
          grid-template-columns: 1fr;
        }
        .menu-value-cell {
          min-height: 0;
          padding: 22px 20px;
        }
        .menu-sec {
          padding: 60px 0;
        }
        .menu-sec-header {
          margin-bottom: 44px;
        }
        .cuts-grid,
        .simple-grid,
        .drinks-grid {
          grid-template-columns: 1fr;
        }
        .cut:nth-child(even),
        .simple:nth-child(even) {
          padding-left: 0;
          border-left: none;
        }
        .cut:nth-child(odd),
        .simple:nth-child(odd) {
          padding-right: 0;
        }
        .sets-grid {
          grid-template-columns: 1fr 1fr;
        }

        /* Private dining */
        .private-header {
      padding-block: 60px 40px;
    }
        .private-h1 {
          font-size: clamp(40px, 10vw, 72px);
        }
        .private-options {
      grid-template-columns: 1fr; gap: 32px;
    }

        /* Visit */
        .visit-inner {
      padding-block: 60px;
    }
        .visit-h1 {
          font-size: clamp(40px, 10vw, 72px);
          margin-bottom: 48px;
        }
        .visit-grid {
          grid-template-columns: 1fr;
          gap: 48px;
        }

        /* Footer */
        footer {
          padding-left: 24px;
          padding-right: 24px;
        }
        .footer-inner {
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 20px;
        }
        .footer-brand-row {
          justify-content: center;
        }
      }

      @media (max-width: 600px) {
        .sets-grid {
          grid-template-columns: 1fr;
        }
        .hero-meta {
          flex-direction: column;
          gap: 8px;
        }
        .hero-meta-sep {
          display: none;
        }
        .hero-body {
          padding: 28px 18px;
        }
        .hero-title-pre {
          letter-spacing: 0.36em;
          gap: 0.9em;
        }
        .hero-ctas .btn-fill,
        .hero-ctas .btn-outline {
          max-width: 260px;
        }
        .hero-title {
          font-size: clamp(48px, 13vw, 80px);
        }
        .hero-tagline {
          font-size: 13px;
          letter-spacing: 0.08em;
        }
        .facts-grid {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
        .fact-num {
          font-size: 28px;
        }
        .drinks-grid {
          grid-template-columns: 1fr;
        }
        .highlight-title {
          font-size: 20px;
        }
        .why-grid {
          grid-template-columns: 1fr;
        }
        .photo-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 430px) {
        .nav-top {
          gap: 10px;
        }
        .nav-actions {
          gap: 10px;
        }
        .nav-bi {
          height: 32px;
        }
        .nav-actions .nav-hire {
          padding: 5px;
        }
        .nav-actions .nav-hire .nav-pill-icon svg,
        .nav-actions .nav-hire .f2b-nav-item-icon svg {
          width: 17px;
          height: 17px;
        }
        .nav-connect svg {
          width: 17px;
          height: 17px;
        }
      }