/*
      Break & Brew — production single-file build
      Architecture:
        1. Design tokens (:root)
        2. Reset + base
        3. Layout primitives
        4. Components (native CSS nesting)
        5. Mobile-first @media queries (min-width)
    */

    /* 1. DESIGN TOKENS */
    :root {
      /* Colors */
      --bg: #100d0a;
      --bg-soft: #19140f;
      --bg-card: rgba(255, 248, 235, 0.075);
      --bg-card-strong: rgba(255, 248, 235, 0.12);
      --text: #fff8eb;
      --muted: rgba(255, 248, 235, 0.72);
      --muted-2: rgba(255, 248, 235, 0.54);
      --line: rgba(255, 248, 235, 0.14);
      --line-strong: rgba(255, 248, 235, 0.24);
      --coffee: #c88945;
      --coffee-2: #e4b36c;
      --green: #2f6b4f;
      --green-2: #79b28c;
      --cream: #f6ead4;
      --ink: #16110c;
      --danger: #e06956;
      --success: #7ccf8a;

      /* Effects */
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
      --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.18);
      --radius-xl: 30px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;

      /* Layout */
      --max: 1180px;
      --gutter: 16px;
      --header-h: 76px;

      /* Fluid type scale */
      --fs-display: clamp(2.75rem, 1.6rem + 6.5vw, 7.95rem);
      --fs-h2: clamp(2rem, 1.3rem + 3.4vw, 4.2rem);
      --fs-h3: clamp(1.6rem, 1.15rem + 2.1vw, 3.2rem);
      --fs-lead: clamp(1.02rem, 0.95rem + 0.5vw, 1.35rem);

      /* Type stacks */
      --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
      --font-serif: ui-serif, "Iowan Old Style", "Georgia Pro", Georgia, "Times New Roman", serif;
      --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

      /* Image tokens — swap to change brand photography */
      --hero-img: url('https://images.unsplash.com/photo-1545062080-a71640ea75a1?auto=format&fit=crop&w=2200&q=80');
      --coffee-img: url('https://images.unsplash.com/photo-1453614512568-c4024d13c247?auto=format&fit=crop&w=1600&q=80');
      --billiard-img: url('https://images.unsplash.com/photo-1535066925810-38b22c6b8255?auto=format&fit=crop&w=1600&q=80');
      --beer-img: url('https://images.unsplash.com/photo-1680677459655-c96f3f419a00?auto=format&fit=crop&w=1200&q=80');
      --snack-img: url('https://images.unsplash.com/photo-1668934805619-2eb1e3d22590?auto=format&fit=crop&w=1200&q=80');
    }

    /* 2. RESET + BASE */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      scroll-padding-top: calc(var(--header-h) + 16px);
    }

    body {
      margin: 0;
      min-height: 100svh;
      font-family: var(--font-sans);
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(200, 137, 69, 0.17), transparent 34rem),
        radial-gradient(circle at 90% 15%, rgba(47, 107, 79, 0.18), transparent 32rem),
        linear-gradient(180deg, #120e0b 0%, #0e0b08 50%, #15100c 100%);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      &.menu-open {
        overflow: hidden;
      }
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
      color: inherit;
    }

    button {
      cursor: pointer;
    }

    img,
    picture,
    svg {
      display: block;
      max-width: 100%;
      height: auto;
    }

    img {
      font-style: italic;
    }

    ::selection {
      color: var(--ink);
      background: var(--coffee-2);
    }

    :focus-visible {
      outline: 2px solid var(--coffee-2);
      outline-offset: 3px;
      border-radius: 8px;
    }

    /* Inline highlight for key phrases */
    mark {
      background: linear-gradient(180deg, transparent 60%, rgba(228, 179, 108, 0.32) 60%);
      color: inherit;
      padding: 0 3px;
      border-radius: 2px;
    }

    /* 3. LAYOUT PRIMITIVES */
    .container {
      width: min(100% - calc(var(--gutter) * 2), var(--max));
      margin-inline: auto;
    }

    .section {
      padding-block: 64px;
      position: relative;

      &--tight {
        padding-block-start: 36px;
      }
    }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 2000;
      padding: 10px 14px;
      color: var(--ink);
      background: var(--cream);
      border-radius: 999px;
      font-weight: 800;
      transform: translateY(-150%);
      transition: transform 0.2s ease;

      &:focus {
        transform: translateY(0);
      }
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* 4. COMPONENTS */

    /* Editorial helpers */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 14px;
      color: var(--coffee-2);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;

      &::before {
        content: "";
        width: 34px;
        height: 1px;
        background: currentColor;
        opacity: 0.8;
      }
    }

    .text-gradient {
      background: linear-gradient(135deg, var(--cream), var(--coffee-2) 52%, var(--green-2));
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    .section-heading {
      display: grid;
      gap: 16px;
      margin-block-end: 32px;

      & h2,
      & h3 {
        margin: 0;
        font-size: var(--fs-h2);
        line-height: 0.98;
        letter-spacing: -0.07em;
      }

      & p {
        margin: 0;
        color: var(--muted);
        font-size: 1.03rem;
      }
    }

    /* Pills, tags, dots */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      color: var(--cream);
      background: rgba(255, 248, 235, 0.08);
      border: 1px solid var(--line);
      border-radius: 999px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-size: 0.9rem;
    }

    .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--success);
      box-shadow: 0 0 0 6px rgba(124, 207, 138, 0.12);

      &.is-closed {
        background: var(--danger);
        box-shadow: 0 0 0 6px rgba(224, 105, 86, 0.13);
      }
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      color: var(--cream);
      background: rgba(16, 13, 10, 0.42);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 13px 20px;
      border: 0;
      border-radius: 999px;
      color: var(--ink);
      background: var(--cream);
      font-weight: 800;
      letter-spacing: -0.01em;
      box-shadow: 0 10px 30px rgba(246, 234, 212, 0.14);
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      text-align: center;

      &:hover,
      &:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(246, 234, 212, 0.22);
      }

      &:active {
        transform: translateY(0);
      }

      &--accent {
        background: linear-gradient(135deg, var(--coffee-2), var(--coffee));
        color: #1c1208;
        box-shadow: 0 16px 42px rgba(200, 137, 69, 0.26);
      }

      &--ghost {
        color: var(--cream);
        background: rgba(255, 248, 235, 0.08);
        border: 1px solid var(--line);
        box-shadow: none;
      }

      &--small {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 0.9rem;
      }

      &--full {
        width: 100%;
      }

      &[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }
    }

    /* Header */
    .site-header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 1000;
      padding: 14px 0;
      border-bottom: 1px solid transparent;
      transition: background 0.25s ease, border-color 0.25s ease;

      &.is-scrolled {
        background: rgba(14, 11, 8, 0.79);
        border-color: var(--line);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
      }

      & .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
      font-weight: 900;
      letter-spacing: -0.04em;

      & .brand-mark {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        color: #1b120a;
        background:
          radial-gradient(circle at 72% 25%, #fff 0 6px, transparent 7px),
          linear-gradient(135deg, var(--coffee-2), var(--green-2));
        box-shadow: inset 0 -8px 18px rgba(0, 0, 0, 0.16), 0 10px 24px rgba(0, 0, 0, 0.22);
        font-size: 1.1rem;
        flex-shrink: 0;
      }

      & .brand-text {
        display: grid;
        line-height: 1;

        & span:first-child {
          font-size: 0.98rem;
        }

        & small {
          color: var(--muted-2);
          font-size: 0.7rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          margin-top: 4px;
        }
      }
    }

    /* Nav links — drawer on mobile, inline on desktop */
    .nav-links {
      position: fixed;
      inset: calc(var(--header-h)) 12px auto 12px;
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(14, 11, 8, 0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4);
      transform: translateY(-12px);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.2s ease, opacity 0.2s ease;

      & a {
        padding: 13px 16px;
        border-radius: 999px;
        color: var(--muted);
        font-weight: 700;
        font-size: 0.95rem;
        transition: color 0.2s ease, background 0.2s ease;

        &:hover,
        &.active {
          color: var(--cream);
          background: rgba(255, 248, 235, 0.09);
        }
      }
    }

    body.menu-open .nav-links {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;

      & > .btn {
        display: none;
      }
    }

    .menu-toggle {
      display: inline-grid;
      place-items: center;
      width: 44px;
      height: 44px;
      color: var(--cream);
      background: rgba(255, 248, 235, 0.08);
      border: 1px solid var(--line);
      border-radius: 999px;

      & .hamburger {
        display: grid;
        gap: 5px;
        width: 22px;

        & > span {
          display: block;
          height: 2px;
          background: currentColor;
          border-radius: 1px;
          transition: transform 0.2s ease, opacity 0.2s ease;
        }
      }

      &[aria-expanded="true"] .hamburger > span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      &[aria-expanded="true"] .hamburger > span:nth-child(2) {
        opacity: 0;
      }

      &[aria-expanded="true"] .hamburger > span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }
    }

    /* Hero */
    .hero {
      min-height: 100svh;
      display: grid;
      align-items: center;
      padding: 120px 0 60px;
      position: relative;
      isolation: isolate;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background-image: var(--hero-img);
        background-size: cover;
        background-position: center;
        transform: scale(1.04);
        filter: saturate(1.05) contrast(1.05);
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
          radial-gradient(circle at 24% 22%, rgba(200, 137, 69, 0.35), transparent 28rem),
          linear-gradient(90deg, rgba(14, 11, 8, 0.94), rgba(14, 11, 8, 0.72) 45%, rgba(14, 11, 8, 0.22)),
          linear-gradient(0deg, #100d0a 0%, rgba(16, 13, 10, 0.06) 38%);
      }

      & h1 {
        margin: 0 0 20px;
        font-size: var(--fs-display);
        line-height: 0.88;
        letter-spacing: -0.095em;
        max-width: 14ch;
      }
    }

    .hero-grid {
      display: grid;
      gap: 32px;
      align-items: end;
    }

    .hero-copy {
      max-width: 770px;
    }

    .hero-lead {
      max-width: 690px;
      margin: 0 0 28px;
      color: rgba(255, 248, 235, 0.86);
      font-size: var(--fs-lead);
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 28px;

      & > .btn {
        flex: 1 1 auto;
        min-width: 0;
      }
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /* Hero card — "Dnes na bare" board */
    .hero-card {
      display: none;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, rgba(255, 248, 235, 0.13), rgba(255, 248, 235, 0.065));
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow: var(--shadow);
      overflow: hidden;

      & .hero-card-image {
        min-height: 160px;
        background: var(--coffee-img) center/cover;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(0deg, rgba(16, 13, 10, 0.92), transparent 70%);
        }
      }

      & .hero-card-body {
        padding: 22px;
      }

      & h2 {
        margin: 0 0 4px;
        font-size: 1.5rem;
        line-height: 1.05;
        letter-spacing: -0.04em;
      }

      & .hero-card-date {
        color: var(--muted-2);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
    }

    .bar-list {
      list-style: none;
      margin: 18px 0 18px;
      padding: 0;
      display: grid;

      & li {
        display: grid;
        grid-template-columns: 84px 1fr;
        gap: 14px;
        align-items: baseline;
        padding: 11px 0;
        border-top: 1px solid var(--line);

        &:first-child {
          border-top: 0;
          padding-top: 0;
        }
      }

      & .bar-list-label {
        color: var(--coffee-2);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      & .bar-list-value {
        color: var(--cream);
        font-weight: 700;
        font-size: 0.95rem;
      }

      & .bar-list-meta {
        display: block;
        color: var(--muted-2);
        font-weight: 500;
        font-size: 0.84rem;
        margin-top: 2px;
      }
    }

    .availability {
      display: grid;
      gap: 0;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(16, 13, 10, 0.4);
      margin: 0 0 16px;
      list-style: none;
    }

    .availability-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 7px 0;
      color: var(--muted);
      font-size: 0.9rem;

      & + .availability-row {
        border-top: 1px solid var(--line);
        padding-top: 7px;
      }

      & strong {
        color: var(--cream);
      }
    }

    /* Stats */
    .stats {
      position: relative;
      z-index: 3;
      padding-top: 16px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .stat-card {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 248, 235, 0.08);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);

      & strong {
        display: block;
        margin-bottom: 6px;
        font-size: clamp(1.65rem, 3vw, 2.25rem);
        line-height: 1;
        letter-spacing: -0.06em;
      }

      & span {
        color: var(--muted);
        font-size: 0.93rem;
      }
    }

    /* Feature cards */
    .feature-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .feature-card {
      min-height: 340px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      overflow: hidden;
      position: relative;
      isolation: isolate;
      box-shadow: var(--shadow);

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background: center/cover no-repeat;
        transition: transform 0.45s ease;
        filter: saturate(1.02) contrast(1.02);
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(0deg, rgba(12, 10, 8, 0.95) 0%, rgba(12, 10, 8, 0.58) 46%, rgba(12, 10, 8, 0.16) 100%);
      }

      &:hover::before,
      &:focus-within::before {
        transform: scale(1.06);
      }

      & .tag {
        align-self: flex-start;
        margin-bottom: 14px;
      }

      & h3 {
        margin: 0 0 10px;
        font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
        line-height: 1;
        letter-spacing: -0.06em;
      }

      & p {
        margin: 0;
        color: rgba(255, 248, 235, 0.86);
      }

      &--coffee::before { background-image: var(--coffee-img); }
      &--billiard::before { background-image: var(--billiard-img); }
      &--beer::before { background-image: var(--beer-img); }
    }

    /* Story + info */
    .split {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: stretch;
    }

    .story-card,
    .info-card,
    .menu-panel,
    .reservation-card,
    .event-card,
    .testimonial {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: var(--bg-card);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .story-card {
      padding: 28px;

      & h3 {
        margin: 0 0 14px;
        font-size: var(--fs-h3);
        line-height: 0.96;
        letter-spacing: -0.07em;
      }

      & p {
        margin: 0 0 16px;
        color: var(--muted);

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .info-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .info-card {
      padding: 22px;

      & h4 {
        margin: 0 0 10px;
        font-size: 1.12rem;
        letter-spacing: -0.025em;
      }

      & p,
      & li {
        color: var(--muted);
      }

      & ul {
        margin: 0;
        padding-left: 1.1rem;
      }
    }

    .accent-list {
      display: grid;
      gap: 12px;
      margin-top: 20px;

      & > div {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: start;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: rgba(255, 248, 235, 0.055);
      }

      & b {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        color: var(--ink);
        background: var(--coffee-2);
        font-weight: 900;
      }

      & strong {
        display: block;
        margin-bottom: 2px;
      }

      & span {
        color: var(--muted);
        font-size: 0.95rem;
      }
    }

    /* Menu */
    .menu-shell {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: start;
    }

    .menu-sidebar {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: rgba(255, 248, 235, 0.075);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      & h3 {
        margin: 0 0 8px;
        font-size: 1.55rem;
        letter-spacing: -0.05em;
      }

      & p {
        margin: 0 0 16px;
        color: var(--muted);
        font-size: 0.96rem;
      }
    }

    .menu-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .menu-tab {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      padding: 12px 14px;
      color: var(--muted);
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 16px;
      text-align: left;
      transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;

      &:hover,
      &[aria-selected="true"] {
        color: var(--cream);
        background: rgba(255, 248, 235, 0.1);
      }

      &[aria-selected="true"] {
        border-color: var(--line-strong);
      }

      & small {
        color: var(--muted-2);
        font-weight: 700;
      }
    }

    .menu-panel {
      padding: 14px;
    }

    .menu-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .menu-item {
      display: grid;
      gap: 10px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255, 248, 235, 0.055);
    }

    .menu-item-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;

      & h4 {
        margin: 0;
        font-size: 1.08rem;
        letter-spacing: -0.025em;
      }

      & strong {
        min-width: max-content;
        color: var(--coffee-2);
        font-size: 1rem;
      }
    }

    .menu-item p {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .menu-labels {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .mini-label {
      padding: 5px 8px;
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255, 248, 235, 0.07);
      font-size: 0.74rem;
      font-weight: 700;
    }

    /* Pricing */
    .table-pricing {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 20px;
    }

    .price-card {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 248, 235, 0.07);

      & small {
        color: var(--muted-2);
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 0.1em;
      }

      & strong {
        display: block;
        margin: 8px 0;
        color: var(--coffee-2);
        font-size: 2rem;
        letter-spacing: -0.05em;
        line-height: 1;
      }

      & p {
        margin: 0;
        color: var(--muted);
        font-size: 0.94rem;
      }
    }

    /* Reservations */
    .reservation-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: start;
    }

    .reservation-card {
      padding: 24px;

      & h2 {
        margin: 0 0 12px;
        font-size: var(--fs-h3);
        line-height: 0.98;
        letter-spacing: -0.065em;
      }

      & .lede {
        margin: -4px 0 20px;
        color: var(--muted);
      }
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .field {
      display: grid;
      gap: 7px;

      &--full {
        grid-column: 1 / -1;
      }

      &--hidden {
        position: absolute;
        left: -9999px;
        opacity: 0;
        pointer-events: none;
      }
    }

    label {
      color: rgba(255, 248, 235, 0.82);
      font-size: 0.9rem;
      font-weight: 700;
    }

    .required-mark {
      color: var(--coffee-2);
      margin-left: 2px;
    }

    input,
    select,
    textarea {
      width: 100%;
      color: var(--cream);
      background: rgba(16, 13, 10, 0.55);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 13px;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

      &:focus,
      &:focus-visible {
        outline: none;
        border-color: rgba(228, 179, 108, 0.72);
        box-shadow: 0 0 0 4px rgba(228, 179, 108, 0.14);
        background: rgba(16, 13, 10, 0.72);
      }

      &:invalid:not(:placeholder-shown) {
        border-color: rgba(224, 105, 86, 0.6);
      }
    }

    select option {
      color: #111;
    }

    textarea {
      resize: vertical;
      min-height: 96px;
    }

    .form-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .form-note {
      margin: 12px 0 0;
      color: var(--muted-2);
      font-size: 0.89rem;
    }

    .summary-box {
      display: grid;
      gap: 12px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: var(--bg-card);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      & h3 {
        margin: 0;
        font-size: 1.95rem;
        line-height: 0.98;
        letter-spacing: -0.06em;
      }

      & .lede {
        color: var(--muted);
        margin: 0;
      }
    }

    .summary-line {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
      color: var(--muted);

      & strong {
        color: var(--cream);
        text-align: right;
      }
    }

    .alert {
      display: none;
      padding: 14px 16px;
      border-radius: var(--radius-md);
      margin-top: 14px;
      line-height: 1.5;
      font-weight: 600;

      &.is-visible {
        display: block;
      }

      &--success {
        color: #092010;
        background: linear-gradient(135deg, #b6f1be, #7ccf8a);
      }

      &--warning {
        color: #2b120b;
        background: linear-gradient(135deg, #ffd5ca, #e9a08f);
      }
    }

    /* Gallery */
    .gallery-grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: 240px;
      gap: 14px;
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 248, 235, 0.07);
      margin: 0;

      & button {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
      }

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.45s ease, filter 0.45s ease;
      }

      &:hover img,
      &:focus-within img {
        transform: scale(1.06);
        filter: brightness(0.9);
      }

      & figcaption {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 8px 12px;
        color: var(--cream);
        background: rgba(16, 13, 10, 0.6);
        border: 1px solid rgba(255, 248, 235, 0.16);
        border-radius: 12px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-weight: 700;
        font-size: 0.9rem;
        pointer-events: none;
      }
    }

    /* Events */
    .events-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .event-card {
      display: grid;
      gap: 14px;
      padding: 22px;

      & time {
        color: var(--coffee-2);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.82rem;
      }

      & h3 {
        margin: 0;
        font-size: 1.5rem;
        line-height: 1.05;
        letter-spacing: -0.045em;
      }

      & p {
        margin: 0;
        color: var(--muted);
      }
    }

    /* Testimonials — magazine-style serif */
    .testimonials-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .testimonial {
      position: relative;
      padding: 38px 26px 24px;
      margin: 0;

      &::before {
        content: "\201C";
        position: absolute;
        top: -10px;
        left: 18px;
        font-family: var(--font-serif);
        font-size: 6rem;
        line-height: 1;
        color: var(--coffee-2);
        opacity: 0.7;
        font-weight: 700;
      }

      & blockquote {
        margin: 0 0 18px;
        padding: 0;
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 1.1rem;
        line-height: 1.55;
        color: var(--cream);
      }

      & figcaption {
        display: grid;
        gap: 2px;
        font-size: 0.92rem;

        & cite {
          color: var(--cream);
          font-style: normal;
          font-weight: 800;
        }

        & span {
          color: var(--muted);
        }
      }
    }

    /* FAQ — native <details> */
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: start;
    }

    .faq-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: var(--bg-card);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      overflow: hidden;

      &[open] .faq-icon {
        transform: rotate(45deg);
      }

      & summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 20px;
        color: var(--cream);
        list-style: none;
        cursor: pointer;
        font-weight: 800;

        &::-webkit-details-marker {
          display: none;
        }
      }

      & .faq-content {
        padding: 0 20px 18px;
        color: var(--muted);

        & p:first-child {
          margin-top: 0;
        }

        & p:last-child {
          margin-bottom: 0;
        }
      }
    }

    .faq-icon {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: rgba(255, 248, 235, 0.08);
      transition: transform 0.2s ease;
      font-weight: 900;
    }

    /* Contact + map */
    .contact-card {
      min-height: 100%;
      padding: 28px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(16, 13, 10, 0.1), rgba(16, 13, 10, 0.85)),
        var(--snack-img) center/cover;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;

      & h3 {
        margin: 0 0 10px;
        font-size: var(--fs-h3);
        line-height: 0.96;
        letter-spacing: -0.065em;
      }

      & p {
        color: var(--muted);
      }
    }

    .contact-list {
      display: grid;
      gap: 10px;
      margin-top: 18px;

      & > a,
      & > span {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 14px;
        border: 1px solid rgba(255, 248, 235, 0.18);
        border-radius: 14px;
        background: rgba(16, 13, 10, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: var(--cream);
        font-weight: 700;
      }

      & > a:hover {
        background: rgba(16, 13, 10, 0.7);
      }

      & > a > span:last-child,
      & > span > span:last-child {
        color: var(--muted);
        font-size: 0.85rem;
        font-weight: 600;
      }
    }

    .map-box {
      position: relative;
      min-height: 320px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(246, 234, 212, 0.06), rgba(47, 107, 79, 0.11)),
        #16110c;
    }

    .map-lines {
      position: absolute;
      inset: -20%;
      opacity: 0.36;
      background:
        linear-gradient(33deg, transparent 0 18%, rgba(255,255,255,0.16) 18.5% 19.5%, transparent 20% 100%),
        linear-gradient(128deg, transparent 0 25%, rgba(255,255,255,0.13) 25.3% 26.3%, transparent 27% 100%),
        linear-gradient(88deg, transparent 0 38%, rgba(255,255,255,0.13) 38.2% 39%, transparent 39.5% 100%);
      background-size: 320px 250px, 360px 270px, 290px 320px;
      transform: rotate(-3deg);
    }

    .map-pin {
      position: absolute;
      left: 50%;
      top: 47%;
      transform: translate(-50%, -50%) rotate(-45deg);
      display: grid;
      place-items: center;
      width: 92px;
      height: 92px;
      border-radius: 50% 50% 50% 0;
      background: linear-gradient(135deg, var(--coffee-2), var(--coffee));
      color: var(--ink);
      font-weight: 900;
      box-shadow: 0 18px 40px rgba(0,0,0,0.36);

      & span {
        transform: rotate(45deg);
        text-align: center;
        line-height: 1;
      }
    }

    .map-note {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 16px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(16, 13, 10, 0.78);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);

      & strong {
        display: block;
        margin-bottom: 4px;
      }

      & span {
        color: var(--muted);
      }
    }

    /* Footer */
    .site-footer {
      padding: 48px 0 32px;
      border-top: 1px solid var(--line);
      color: var(--muted);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
    }

    .footer-brand {
      display: grid;
      gap: 6px;
      max-width: 420px;

      & strong {
        color: var(--cream);
        font-size: 1rem;
      }

      & .footer-address {
        color: var(--muted-2);
        font-size: 0.9rem;
      }
    }

    .footer-col {
      display: grid;
      gap: 8px;

      & .footer-col-title {
        color: var(--cream);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-bottom: 4px;
      }

      & a {
        color: var(--muted);
        font-weight: 700;
        font-size: 0.95rem;
        transition: color 0.2s ease;

        &:hover {
          color: var(--cream);
        }
      }

      & .footer-meta {
        color: var(--muted-2);
        font-size: 0.85rem;
        margin-top: 4px;
      }
    }

    .footer-bottom {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      padding-top: 24px;
      margin-top: 24px;
      border-top: 1px solid var(--line);
      color: var(--muted-2);
      font-size: 0.85rem;
    }

    /* Toast */
    .toast {
      position: fixed;
      left: 50%;
      bottom: 22px;
      z-index: 1600;
      transform: translate(-50%, 140px);
      width: min(420px, calc(100% - 32px));
      padding: 14px 16px;
      color: #0d1b10;
      background: linear-gradient(135deg, #baf0c1, #7ccf8a);
      border-radius: 16px;
      box-shadow: var(--shadow);
      transition: transform 0.25s ease;
      font-weight: 700;

      &.is-visible {
        transform: translate(-50%, 0);
      }
    }

    /* Lightbox — native <dialog> */
    .lightbox {
      width: min(100% - 32px, 980px);
      max-width: none;
      max-height: 90svh;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--cream);
      overflow: visible;

      &::backdrop {
        background: rgba(0, 0, 0, 0.84);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      &[open] {
        animation: lightbox-in 0.2s ease;
      }

      & .lightbox-content {
        position: relative;
      }

      & img {
        width: 100%;
        max-height: 78svh;
        object-fit: contain;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(255, 248, 235, 0.18);
        background: #000;
      }

      & .lightbox-caption {
        margin-top: 10px;
        text-align: center;
        font-weight: 700;
      }

      & .lightbox-close {
        position: absolute;
        top: -54px;
        right: 0;
        width: 44px;
        height: 44px;
        color: var(--cream);
        background: rgba(255, 248, 235, 0.12);
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        font-size: 1.1rem;
      }
    }

    @keyframes lightbox-in {
      from { opacity: 0; transform: scale(0.97); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Reveal on scroll — only hides when JS is enabled, so content stays
       visible if JS fails or is blocked. */
    .js .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }

    .js .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
      .reveal {
        opacity: 1;
        transform: none;
      }
    }

    /* 5. MOBILE-FIRST BREAKPOINTS */

    @media (min-width: 480px) {
      .hero-ctas > .btn {
        flex: 0 1 auto;
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr;
      }

      .events-grid {
        grid-template-columns: 1fr 1fr;
      }

      .table-pricing {
        grid-template-columns: 1fr 1fr;
      }

      .reservation-card,
      .story-card,
      .summary-box,
      .contact-card {
        padding: 28px;
      }
    }

    @media (min-width: 760px) {
      :root {
        --gutter: 24px;
      }

      .section {
        padding-block: 84px;

        &--tight {
          padding-block-start: 48px;
        }
      }

      .section-heading {
        margin-block-end: 36px;
      }

      .feature-grid {
        grid-template-columns: 1fr 1fr;
      }

      .info-grid {
        grid-template-columns: 1fr 1fr;
      }

      .form-grid {
        grid-template-columns: 1fr 1fr;
      }

      .menu-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .menu-grid {
        grid-template-columns: 1fr 1fr;
      }

      .gallery-grid {
        grid-template-columns: 1.15fr 0.85fr;
      }

      .events-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .table-pricing {
        grid-template-columns: repeat(3, 1fr);
      }

      .stats-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
      }

      .footer-bottom {
        grid-template-columns: 1fr auto;
      }

      .hero-card {
        display: block;
      }
    }

    @media (min-width: 1080px) {
      :root {
        --gutter: 32px;
      }

      .section {
        padding-block: 98px;

        &--tight {
          padding-block-start: 54px;
        }
      }

      .section-heading {
        grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.55fr);
        gap: 28px;
        align-items: end;
      }

      .feature-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .nav-links {
        position: static;
        inset: auto;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px;
        border-radius: 999px;
        background: rgba(16, 13, 10, 0.34);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: none;
        transform: none;
        opacity: 1;
        pointer-events: auto;

        & a {
          padding: 9px 12px;
          font-size: 0.91rem;
        }
      }

      .menu-toggle {
        display: none;
      }

      .nav-actions > .btn {
        display: inline-flex;
      }

      .hero {
        padding: 134px 0 70px;

        & h1 {
          margin-bottom: 24px;
        }
      }

      .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
        gap: 48px;
      }

      .stats {
        margin-top: -52px;
        padding-top: 0;
      }

      .split {
        grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1fr);
        gap: 18px;
      }

      .menu-shell {
        grid-template-columns: 310px minmax(0, 1fr);
        gap: 18px;
      }

      .menu-sidebar {
        position: sticky;
        top: calc(var(--header-h) + 16px);
      }

      .menu-tabs {
        grid-template-columns: 1fr;
      }

      .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .gallery-grid {
        grid-template-columns: 1.15fr 0.85fr 1fr;

        & > .gallery-item:nth-child(1) {
          grid-row: span 2;
        }

        & > .gallery-item:nth-child(4) {
          grid-column: span 2;
        }
      }

      .reservation-layout {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
        gap: 20px;
      }

      .faq-grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1fr);
        gap: 20px;
      }
    }