:root{
    --ground:#171310;
    --ground-2:#0f0c0a;
    --surface:#221c16;
    --surface-2:#2b2319;
    --gold:#c9a35c;
    --gold-bright:#e6c789;
    --gold-dim:#a68b59;
    --green:#33503f;
    --green-deep:#203026;
    --ink:#f1e8d8;
    --ink-muted:#a89a83;
    --rule:#42362590;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:'Karla', ui-sans-serif, system-ui, sans-serif;
    font-size:1rem;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }
  img,svg{ display:block; max-width:100%; }

  .container{
    width:100%;
    max-width:70rem;
    margin:0 auto;
    padding-inline:1.5rem;
  }

  h1,h2,h3{
    font-family:'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight:600;
    line-height:1.08;
    text-wrap:balance;
    margin:0;
  }

  .eyebrow{
    font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
  }

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

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

  .skip-link{
    position:absolute; left:1rem; top:-3rem;
    background:var(--gold); color:var(--ground-2);
    padding:0.6rem 1rem; border-radius:0.125rem;
    font-family:'IBM Plex Mono', monospace; font-size:0.85rem;
    transition:top .15s ease;
    z-index:100;
  }
  .skip-link:focus{ top:1rem; }

  :focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

  /* ---------- knot mark ---------- */
  .knot{
    display:block;
    width:1.75rem; height:1.75rem;
    object-fit:contain;
    flex-shrink:0;
  }
  .rule-row .knot{ width:1.375rem; height:1.375rem; opacity:0.9; }
  .footer-brand .knot{ width:1.625rem; height:1.625rem; }

  .hero-brand{
    margin:0;
    line-height:0;
  }

  .hero-logo{
    display:block;
    width:clamp(17.5rem, 28vw, 31rem);
    max-width:100%;
    height:auto;
    margin:0 auto 1.75rem;
  }

  /* ---------- brass rule divider ---------- */
  .rule-row{
    display:flex; align-items:center; gap:1rem;
    max-width:13.75rem; margin-inline:auto;
  }
  .rule-row .line{ height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
  .rule-row.left-align{ margin-inline:0; }

  /* ---------- header / nav ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(15,12,10,0.86);
    backdrop-filter:saturate(140%) blur(0.5rem);
    border-bottom:1px solid var(--rule);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding-block:0.75rem;
  }
  .brand{
    display:flex; align-items:center; gap:0.65rem;
    text-decoration:none;
    font-family:'Fraunces', serif; font-weight:600;
    letter-spacing:0.02em;
    font-size:1.05rem;
    color:var(--ink);
  }
  nav.links{
    display:flex; align-items:center; gap:1.75rem;
  }
  nav.links a{
    text-decoration:none;
    font-size:0.92rem;
    letter-spacing:0.03em;
    color:var(--ink-muted);
    padding:0.4rem 0.2rem;
    transition:color .15s ease;
  }
  nav.links a:hover{ color:var(--gold-bright); }
  .nav-cta{
    display:inline-flex; align-items:center;
    border:1px solid var(--gold-dim);
    color:var(--gold-bright) !important;
    padding:0.45rem 0.9rem;
    border-radius:0.125rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem !important;
    letter-spacing:0.06em;
  }
  .nav-cta:hover{ border-color:var(--gold); background:var(--surface); }

  @media (max-width: 47.5em){
    nav.links{ display:none; }
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:calc(100vh - 4.5rem);
    display:flex;
    align-items:center;
    justify-content:center;
    padding-block:clamp(4.5rem, 8vh, 7.5rem);
    text-align:center;
    overflow:hidden;
    background:var(--ground); /* fallback if brick-texture.png fails to load */
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    opacity:0.6;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.12), transparent 22%, transparent 78%, rgba(0,0,0,0.18));
    pointer-events:none;
  }
  .hero-media{
    position:absolute; inset:0;
    z-index:0;
    overflow:hidden;
    background-image:url('./assets/brick-texture.png');
    background-repeat:repeat;
  }
  .hero-scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(15,12,10,0.35) 0%, rgba(15,12,10,0.2) 45%, rgba(15,12,10,0.6) 100%),
      radial-gradient(ellipse 60% 48% at 50% 18%, rgba(201,163,92,0.16), transparent 58%);
  }
  .hero-inner{ position:relative; z-index:2; }
  .hero .eyebrow{ margin-bottom:1rem; }
  .hero h1{
    font-size:clamp(3.1rem, 9vw, 6.2rem);
    color:var(--gold-bright);
    letter-spacing:-0.01em;
  }
  .hero .sub{
    font-family:'Fraunces', serif; font-style:italic; font-weight:400;
    font-size:clamp(1.15rem, 2.6vw, 1.55rem);
    color:var(--ink-muted);
    margin-top:0.35rem;
  }
  .tagline-row{
    margin-top:2rem;
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:0.6rem 0;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.82rem;
    letter-spacing:0.04em;
    color:var(--ink-muted);
  }
  .tagline-row span:not(:last-child)::after{
    content:"·"; color:var(--gold-dim); margin-inline:0.7rem;
  }
  .hero-ctas{
    margin-top:2.5rem;
    display:flex; justify-content:center; gap:0.9rem; flex-wrap:wrap;
  }

  .btn{
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.8rem 1.5rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.8rem; letter-spacing:0.05em;
    text-decoration:none;
    border-radius:0.125rem;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn-primary{
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    color:var(--ground-2);
    font-weight:500;
  }
  .btn-primary:hover{ background:linear-gradient(180deg, var(--gold-bright), var(--gold-bright)); }
  .btn-outline{
    border:1px solid var(--gold-dim);
    color:var(--gold-bright);
  }
  .btn-outline:hover{ border-color:var(--gold); background:var(--surface); }

  /* ---------- sections ---------- */
  section{ padding-block:5.5rem; }
  .section-head{ margin-bottom:2.75rem; }
  .section-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.6rem); color:var(--ink); margin-top:0.5rem; }

  /* about band */
  .about-grid{
    display:grid; grid-template-columns:1.3fr 1fr; gap:3.5rem;
    align-items:start;
  }
  .about-grid p + p{ margin-top:1rem; }
  .about-grid .lede{ max-width:56ch; color:var(--ink); font-size:1.05rem; }

  .stat-card{
    background:var(--surface);
    border:1px solid var(--rule);
    padding:2rem;
    border-radius:0.2rem;
  }
  .stat-card .eyebrow{ display:block; margin-bottom:1.1rem; }
  .stat-big{
    font-family:'Fraunces', serif; font-weight:600; font-style:italic;
    font-size:3rem; color:var(--gold-bright); line-height:1;
  }
  .stat-card .stat-label{ margin-top:0.4rem; font-size:0.92rem; color:var(--ink-muted); }
  .stat-card .stat-row{ margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--rule); }
  .stat-card .stat-row .stat-big{ font-size:1.9rem; }
  .stat-source{
    margin-top:1.5rem; font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
    color:var(--gold-dim); letter-spacing:0.05em;
  }

  @media (max-width: 51.25em){
    .about-grid{ grid-template-columns:1fr; }
  }

  /* hours / visit band */
  .visit{ background:var(--ground-2); }
  .visit-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:1.75rem;
  }
  .card{
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:0.2rem;
    padding:2.25rem;
  }
  .card h3{
    font-size:1.3rem; color:var(--gold-bright);
    margin-bottom:1.4rem;
  }
  .hours-list{
    margin:0;
    padding:0;
    font-family:'IBM Plex Mono', monospace;
    font-variant-numeric:tabular-nums;
    font-size:0.92rem;
  }
  .hours-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.55rem 0;
    border-bottom:1px solid var(--rule);
  }
  .hours-row:last-child{
    border-bottom:none;
  }
  .hours-row dt{
    margin:0;
    color:var(--ink-muted);
    letter-spacing:0.04em;
    font-weight:normal;
  }
  .hours-row dd{
    margin:0;
    text-align:right;
    color:var(--ink);
  }
  .card .note{
    margin-top:1.25rem; font-size:0.88rem; color:var(--ink-muted);
  }
  .card .note strong{ color:var(--ink); font-weight:600; }

  .find-us .pin{ width:2.125rem; height:2.125rem; margin-bottom:1rem; }
  .find-us address{ font-style:normal; font-size:1rem; color:var(--ink); }
  .find-us .contact-list{ margin-top:1.5rem; display:flex; flex-direction:column; gap:0.6rem; }
  .find-us .contact-list a{
    text-decoration:none; color:var(--gold-bright);
    font-size:0.92rem; display:inline-flex; align-items:center; gap:0.5rem;
    width:fit-content;
    border-bottom:1px solid transparent;
  }
  .find-us .contact-list a:hover{ border-bottom-color:var(--gold-dim); }
  .social-row{ margin-top:1.5rem; display:flex; gap:0.9rem; }
  .social-row a{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.375rem; height:2.375rem;
    border:1px solid var(--rule); border-radius:0.125rem;
    color:var(--ink-muted);
    text-decoration:none;
    transition:border-color .15s ease, color .15s ease;
  }
  .social-row a:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .social-row svg{ width:1.0625rem; height:1.0625rem; }

  @media (max-width: 45em){
    .visit-grid{ grid-template-columns:1fr; }
  }

  /* live music band */
  .music{
    background:linear-gradient(180deg, var(--green-deep), var(--green));
    color:var(--ink);
    text-align:center;
  }
  .music .section-head{ margin-bottom:1.75rem; }
  .music .section-head .eyebrow{ color:var(--gold-bright); }
  .music p.body{ max-width:58ch; margin:0 auto; font-size:1.02rem; color:#e4ddc9; }
  .music .btn-outline{ border-color:rgba(230,199,137,0.45); }
  .music .hero-ctas{ margin-top:2.25rem; }

  /* menu band */
  .menu-band .container{ max-width:47.5rem; text-align:center; }
  .menu-band p.body{ font-size:1.02rem; color:var(--ink-muted); max-width:56ch; margin:0 auto; }
  .menu-band .hero-ctas{ margin-top:2.25rem; justify-content:center; }
  .menu-band .section-head{ text-align:center; }
  .menu-band .rule-row{ margin-bottom:1.75rem; }

  /* footer */
  footer{
    background:var(--ground-2);
    border-top:1px solid var(--rule);
    padding-block:3.5rem 2.5rem;
  }
  .footer-grid{
    display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem;
  }
  .footer-brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
  .footer-brand .knot{ width:1.625rem; height:1.625rem; }
  .footer-brand span{
    font-family:'Fraunces', serif; font-weight:600; color:var(--ink); font-size:1rem;
  }
  footer .col-title{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-dim);
    margin-bottom:0.9rem;
  }
  footer address{ font-style:normal; color:var(--ink-muted); font-size:0.92rem; line-height:1.7; }
  footer .hours-mini{
    font-family:'IBM Plex Mono', monospace; font-size:0.85rem;
    color:var(--ink-muted); font-variant-numeric:tabular-nums;
    display:flex; flex-direction:column; gap:0.35rem;
  }
  footer a.email{ color:var(--gold-bright); text-decoration:none; font-size:0.92rem; }
  footer a.email:hover{ text-decoration:underline; }
  .footer-bottom{
    margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--rule);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.75rem;
    font-size:0.78rem; color:var(--ink-muted);
  }
  @media (max-width: 45em){
    .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  }

  /* scroll reveal */
  .reveal{ opacity:0; transform:translateY(0.875rem); transition:opacity .6s ease, transform .6s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }