/* The Vault Liverpool — main.css */
:root{
  --bg:#231f20;
  --bg-alt:#111112;
  --ink:#efeae2;
  --ink-dim:#a57759;
  --muted:#8a8578;
  --gold:#ab9c6a;
  --gold-soft:#b9ac97;
  --line:rgba(201,168,76,.25);
  --serif:"Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:"Inter", -apple-system, Segoe UI, Roboto, sans-serif;
  --maxw:1240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-soft);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold)}
p{margin:0 0 1.1em}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:-.005em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.4rem,5vw,4.2rem)}
h2{font-size:clamp(1.9rem,3.2vw,2.8rem)}
h3{font-size:1.5rem}
h4{font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);font-weight:500;color:var(--gold-soft)}
.serif{font-family:var(--serif)}
.display{font-size:clamp(2.8rem,6.5vw,5.6rem);line-height:1.05;font-weight:500}
.display em{font-style:italic;color:var(--gold-soft)}
.display-sm{font-size:clamp(2.2rem,4.5vw,3.4rem)}
.eyebrow{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem;font-weight:500}
.eyebrow.gold{color:var(--gold)}
.lede{font-size:1.2rem;line-height:1.55;color:var(--ink-dim);max-width:60ch;margin-left:auto;margin-right:auto}
.muted{color:var(--ink-dim)}
.center{text-align:center}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container.narrow{max-width:820px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.4);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s,padding .3s}
.site-header.is-scrolled{background:rgba(11,11,12,.9);border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:24px}
.site-title{font-family:var(--serif);font-size:1.5rem;color:var(--ink);letter-spacing:.02em}
.site-title .brand{color:var(--gold);font-style:italic}
.site-title .mark{color:var(--ink-dim);font-size:.85em}
.custom-logo{max-height:200px;width:auto}

.site-nav{display:flex;align-items:center}
.primary-menu{list-style:none;margin:0;padding:0;display:flex;gap:34px;align-items:center}
.primary-menu a{color:var(--ink);font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.primary-menu a:hover{color:var(--gold)}
.primary-menu .menu-cta a,
.primary-menu li.menu-cta > a{
  border:1px solid var(--gold);padding:11px 20px;color:var(--gold);border-radius:2px;
}
.primary-menu .menu-cta a:hover{background:var(--gold);color:#0b0b0c}

.nav-toggle{display:none;background:transparent;border:0;padding:10px;cursor:pointer}
.nav-toggle .bar{display:block;width:24px;height:1.5px;background:var(--ink);margin:5px 0;transition:.3s}

/* ===========================
   Dropdown Navigation
=========================== */

.primary-menu li{
    position:relative;
}

/* Parent menu item */
.primary-menu > li{
    display:flex;
    align-items:center;
}

/* Hide dropdown by default */
.primary-menu .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:240px;

    margin:0;
    padding:16px 0;

    list-style:none;

    background:#111112;
    border:1px solid var(--line);

    opacity:0;
    visibility:hidden;
    transform:translateY(12px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s;

    z-index:999;
}

/* Show on hover */
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Dropdown items */
.primary-menu .sub-menu li{
    width:100%;
}

.primary-menu .sub-menu a{
    display:block;
    padding:12px 24px;

    color:var(--ink);

    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;

    white-space:nowrap;
}

.primary-menu .sub-menu a:hover{
    background:rgba(255,255,255,.04);
    color:var(--gold);
}

/* Little arrow on parent items */
.primary-menu .menu-item-has-children > a::after{
    content:"▾";
    margin-left:8px;
    font-size:.65em;
    color:var(--gold-soft);
}
/* Buttons */
.btn{display:inline-block;font-family:var(--sans);font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;padding:16px 30px;border-radius:2px;transition:all .25s;cursor:pointer;border:1px solid transparent;font-weight:500}
.btn.small{padding:11px 20px;font-size:.75rem}
.btn-gold{background:var(--gold);color:#0b0b0c;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-soft);color:#0b0b0c;border-color:var(--gold-soft)}
.btn-ghost{color:var(--ink);border-color:rgba(244,239,230,.35)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-outline{color:var(--gold);border-color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:#0b0b0c}

/* Hero */
.hero{min-height:92vh;display:flex;align-items:center;background-size:cover;background-position:center;position:relative;color:var(--ink)}
.hero-inner{padding:140px 24px 100px;max-width:1100px}
.hero .eyebrow{color:var(--gold)}
.hero .lede{margin-left:0;margin-right:0;color:#e8e2d3;max-width:640px;font-size:1.25rem}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* Sections */
.section{padding:30px 0;position:relative}
.section.alt-bg{background:var(--bg-alt)}
.section-intro{padding:130px 0 90px}
.section-intro .lede{font-size:1.35rem;color:var(--ink-dim);margin-top:20px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.section-split.reverse .split-media{order:2}
.split-media img{border-radius:2px;filter:brightness(.95) contrast(1.05)}
.split-copy h2{margin-bottom:.4em}
.feature-list{list-style:none;padding:0;margin:0 0 32px;border-top:1px solid var(--line)}
.feature-list li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink-dim);font-size:.98rem;letter-spacing:.02em}

.section-vault{background-size:cover;background-position:center;padding:160px 0}
.section-vault .light h2,.section-vault .light p{color:var(--ink)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.hours-card{border-top:1px solid var(--gold);padding-top:26px}
.hours-card h3{font-size:1.35rem;margin-bottom:.6em}

/* Page hero */
.page-hero{padding:180px 0 60px;background:var(--bg-alt);border-bottom:1px solid var(--line)}
.page-hero.small{padding:150px 0 40px}
.page-hero h1{margin:0}

/* Prose */
.prose{font-size:1.08rem;color:var(--ink-dim)}
.prose h2,.prose h3{color:var(--ink);margin-top:2em}
.prose ul,.prose ol{padding-left:1.2em}
.prose img{margin:2rem 0;border-radius:2px}
.prose blockquote{border-left:2px solid var(--gold);padding:.4em 0 .4em 1.4em;margin:2em 0;font-family:var(--serif);font-size:1.4rem;font-style:italic;color:var(--ink)}
.featured-image{margin:0 0 2.5rem}
.link-arrow{color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}

/* Menu (food) styling helpers usable inside prose */
.prose .menu-section{margin:3em 0}
.prose .menu-section h2{border-bottom:1px solid var(--line);padding-bottom:.4em;color:var(--gold-soft);font-style:italic}
.prose .menu-item{display:flex;justify-content:space-between;gap:2em;padding:1em 0;border-bottom:1px dashed var(--line)}
.prose .menu-item .name{font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin:0 0 .2em}
.prose .menu-item .desc{color:var(--muted);font-size:.95rem;margin:0}
.prose .menu-item .price{color:var(--gold);font-family:var(--serif);font-size:1.15rem;white-space:nowrap}

/* Post grid */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.post-card .post-thumb img{border-radius:2px;aspect-ratio:3/2;object-fit:cover}
.post-card h2{font-size:1.5rem;margin:.5em 0 .3em}
.post-card h2 a{color:var(--ink)}
.post-card h2 a:hover{color:var(--gold)}
.pagination{margin-top:60px;text-align:center}

/* Footer */
.site-footer{background:#070707;padding:80px 0 30px;border-top:1px solid var(--line);margin-top:60px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.footer-col h4{margin-bottom:1em}
.brand-mark{font-family:var(--serif);font-size:1.3rem;color:var(--gold);text-transform:none;letter-spacing:0}
.footer-bottom{border-top:1px solid var(--line);margin-top:60px;padding-top:24px;color:var(--muted)}

/* Utilities */
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;background:var(--gold);color:#000;padding:8px 14px;z-index:100}

/* Responsive */
@media (max-width:900px){

    .nav-toggle{
        display:block;
        position:relative;
        z-index:100;
    }

    .site-nav .primary-menu{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;

        background:#0b0b0c;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:28px;

        margin:0;
        padding:0;

        transform:translateY(-100%);
        transition:transform .35s ease;

        z-index:90;
    }

    .site-nav .primary-menu.is-open{
        transform:translateY(0);
    }

    .primary-menu a{
        font-size:1rem;
    }
	/* Mobile dropdowns */

.primary-menu li{
    width:100%;
    text-align:center;
}

.primary-menu .sub-menu{
    position:static;

    display:none;

    opacity:1;
    visibility:visible;
    transform:none;

    background:none;
    border:0;

    padding:10px 0 0;
}

.primary-menu .sub-menu a{
    padding:12px 0;
    color:var(--ink-dim);
    font-size:.9rem;
}

.primary-menu .menu-item-has-children.submenu-open > .sub-menu{
    display:block;
}

} /* closes @media */

/* Resident Artist Grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: stretch;
}

/* Artist Cards */
.artist-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.artist-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.artist-card h3 {
    margin: 20px 0 10px;
}

.artist-card .link-arrow {
    margin-top: auto;
}


/* Tablet */
@media (max-width: 900px) {

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

}


/* Mobile */
@media (max-width: 600px) {

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

}