/* ==========================================================================
   IDEAL JERK — Design System
   Grounded in the real material world of a Kingston jerk hub:
   pimento smoke, zinc roofing, drum-pan grills, hand-painted signage,
   scotch bonnet and ackee, chalkboard menus, kitchen order tickets.
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700;800&display=swap');

   :root {
     /* ---- Color: named after the actual materials of the place ---- */
     --char:        #1A1410;   /* soot-black, pimento wood ash */
     --char-soft:   #241D17;   /* lifted char, panel surfaces on dark */
     --zinc:        #F2E4C8;   /* bleached zinc roof / paper */
     --zinc-dim:    #E8D8B6;   /* zinc in shade */
     --scotch:      #C23B22;   /* scotch bonnet red — hero accent */
     --scotch-deep: #9C2E19;   /* scorched scotch, hover/active */
     --ackee:       #E8A93C;   /* ackee / turmeric yellow — secondary accent */
     --callaloo:    #3D5A3D;   /* callaloo green — success/positive only */
     --callaloo-deep: #2A3F2A;
     --drum-rust:   #7A6A52;   /* weathered wood & drum rust — muted text/borders */
     --drum-rust-soft: #A6957A;
     --smoke:       rgba(26, 20, 16, 0.06);
     --smoke-heavy: rgba(26, 20, 16, 0.14);
   
     /* ---- Type ---- */
     --font-display: 'Anton', 'Archivo Black', sans-serif;
     --font-body: 'Inter', -apple-system, sans-serif;
     --font-ticket: 'Space Mono', monospace;
   
     /* ---- Scale (rem-based throughout) ---- */
     --space-3xs: 0.25rem;
     --space-2xs: 0.5rem;
     --space-xs:  0.75rem;
     --space-sm:  1rem;
     --space-md:  1.5rem;
     --space-lg:  2rem;
     --space-xl:  3rem;
     --space-2xl: 4.5rem;
     --space-3xl: 6.5rem;
   
     --radius-sm: 0.25rem;
     --radius-md: 0.5rem;
     --radius-lg: 1rem;
   
     --shadow-card: 0 0.25rem 1rem rgba(26, 20, 16, 0.12);
     --shadow-lift: 0 0.5rem 2rem rgba(26, 20, 16, 0.22);
     --shadow-ticket: 0 0.125rem 0 rgba(26, 20, 16, 0.08), 0 0.25rem 0.75rem rgba(26, 20, 16, 0.1);
   
     --ease-smoke: cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   * { box-sizing: border-box; }
   html { font-size: 100%; scroll-behavior: smooth; }
   
   @media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
     }
   }
   
   body {
     margin: 0;
     font-family: var(--font-body);
     background: var(--zinc);
     color: var(--char);
     -webkit-font-smoothing: antialiased;
   }
   
   img { max-width: 100%; display: block; }
   
   a { color: inherit; text-decoration: none; }
   
   button {
     font-family: inherit;
     cursor: pointer;
     border: none;
     background: none;
     color: inherit;
   }
   
   :focus-visible {
     outline: 0.1875rem solid var(--ackee);
     outline-offset: 0.1875rem;
   }
   
   /* ==========================================================================
      Texture: charred-edge / grain overlay used sparingly on dark surfaces
      ========================================================================== */
   
   .grain {
     position: relative;
   }
   .grain::after {
     content: '';
     position: absolute;
     inset: 0;
     pointer-events: none;
     opacity: 0.05;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
     mix-blend-mode: overlay;
   }
   
   /* ==========================================================================
      Typography scale
      ========================================================================== */
   
   .display {
     font-family: var(--font-display);
     text-transform: uppercase;
     letter-spacing: 0.01em;
     line-height: 0.92;
     color: var(--char);
   }
   
   .ticket-text {
     font-family: var(--font-ticket);
     letter-spacing: -0.01em;
   }
   
   .eyebrow {
     font-family: var(--font-ticket);
     text-transform: uppercase;
     letter-spacing: 0.14em;
     font-size: 0.75rem;
     font-weight: 700;
     color: var(--scotch);
   }
   
   /* ==========================================================================
      Shared: buttons
      ========================================================================== */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     padding: 0.85rem 1.5rem;
     border-radius: var(--radius-sm);
     font-weight: 700;
     font-size: 0.95rem;
     transition: transform 0.15s var(--ease-smoke), box-shadow 0.15s var(--ease-smoke), background 0.15s;
     white-space: nowrap;
   }
   .btn:active { transform: translateY(0.0625rem); }
   
   .btn-primary {
     background: var(--scotch);
     color: var(--zinc);
     box-shadow: var(--shadow-card);
   }
   .btn-primary:hover { background: var(--scotch-deep); }
   
   .btn-ghost {
     background: transparent;
     color: var(--char);
     border: 0.125rem solid var(--char);
   }
   .btn-ghost:hover { background: var(--char); color: var(--zinc); }
   
   .btn-ghost-light {
     background: transparent;
     color: var(--zinc);
     border: 0.125rem solid var(--drum-rust-soft);
   }
   .btn-ghost-light:hover { background: var(--zinc); color: var(--char); }
   
   .btn-sm { padding: 0.5rem 1rem; font-size: 0.8rem; }
   
   /* ==========================================================================
      Skeleton loading — charcoal shimmer, not generic grey
      ========================================================================== */
   
   .skeleton {
     position: relative;
     overflow: hidden;
     background: var(--smoke-heavy);
     border-radius: var(--radius-sm);
   }
   .skeleton::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, transparent, rgba(242, 228, 200, 0.5), transparent);
     transform: translateX(-100%);
     animation: shimmer 1.4s infinite;
   }
   @keyframes shimmer {
     100% { transform: translateX(100%); }
   }
   
   /* ==========================================================================
      Toast / notification
      ========================================================================== */
   
   .toast-stack {
     position: fixed;
     bottom: 1.5rem;
     right: 1.5rem;
     z-index: 200;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     max-width: min(24rem, calc(100vw - 2rem));
   }
   @media (max-width: 40rem) {
     .toast-stack { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
   }
   
   .toast {
     background: var(--char);
     color: var(--zinc);
     padding: 0.85rem 1.1rem;
     border-radius: var(--radius-sm);
     box-shadow: var(--shadow-lift);
     display: flex;
     align-items: center;
     gap: 0.65rem;
     font-size: 0.875rem;
     font-weight: 600;
     animation: toast-in 0.3s var(--ease-smoke);
     border-left: 0.25rem solid var(--ackee);
   }
   .toast.success { border-left-color: var(--callaloo); }
   @keyframes toast-in {
     from { opacity: 0; transform: translateY(0.75rem); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   /* ==========================================================================
      Scrollbar (webkit) — subtle, on-brand
      ========================================================================== */
   
   ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--drum-rust-soft); border-radius: 1rem; }
   
   /* ==========================================================================
      Tour overlay (shared across pages)
      ========================================================================== */
   
   .tour-scrim {
     position: fixed;
     inset: 0;
     background: rgba(26, 20, 16, 0.55);
     z-index: 900;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.25s var(--ease-smoke);
   }
   .tour-scrim.active { opacity: 1; pointer-events: auto; }
   
   .tour-highlight {
     position: relative;
     z-index: 901;
     box-shadow: 0 0 0 0.3rem var(--ackee), 0 0 0 100vmax rgba(26, 20, 16, 0.55);
     border-radius: var(--radius-sm);
     transition: box-shadow 0.3s var(--ease-smoke);
   }
   
   .tour-card {
     position: fixed;
     z-index: 902;
     background: var(--zinc);
     color: var(--char);
     border-radius: var(--radius-md);
     padding: 1.25rem 1.4rem;
     max-width: 20rem;
     box-shadow: var(--shadow-lift);
     border: 0.125rem solid var(--char);
     opacity: 0;
     transform: translateY(0.5rem);
     transition: opacity 0.25s var(--ease-smoke), transform 0.25s var(--ease-smoke);
   }
   .tour-card.active { opacity: 1; transform: translateY(0); }
   
   .tour-card__step {
     font-family: var(--font-ticket);
     font-size: 0.7rem;
     letter-spacing: 0.1em;
     color: var(--scotch);
     font-weight: 700;
     text-transform: uppercase;
   }
   
   .tour-card__title {
     font-family: var(--font-display);
     font-size: 1.15rem;
     text-transform: uppercase;
     margin: 0.35rem 0 0.5rem;
   }
   
   .tour-card__body {
     font-size: 0.875rem;
     line-height: 1.5;
     color: var(--drum-rust);
     margin: 0 0 1rem;
   }
   
   .tour-card__footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
   }
   
   .tour-dots {
     display: flex;
     gap: 0.3rem;
   }
   .tour-dot {
     width: 0.4rem;
     height: 0.4rem;
     border-radius: 50%;
     background: var(--drum-rust-soft);
   }
   .tour-dot.active { background: var(--scotch); }
   
   .tour-nav { display: flex; gap: 0.5rem; }
   
   @media (max-width: 40rem) {
     .tour-card { max-width: calc(100vw - 2rem); }
   }