@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&display=swap");

.vab-archive,
.vab-single,
.vab-related{
    --vine:#5b1e2d;
    --olive:#6b6f4e;
    --olive-dark:#555a3f;
    --terracotta:#c37a5a;
    --stone:#d8cec2;
    --stone-soft:#e8e0d7;
    --cream:#f6f2ea;
    --paper:#fffdf8;
    --gold:#b89a5a;
    --ink:#302b28;
    --muted:#6f6761;
    --heading:"Cormorant Garamond",Georgia,serif;
    --body:"DM Sans",Arial,sans-serif;
    box-sizing:border-box;
    color:var(--ink);
    font-family:var(--body);
}

.vab-archive *,
.vab-single *,
.vab-related *{box-sizing:border-box}

.vab-archive a,
.vab-single a,
.vab-related a{text-decoration:none}

.vab-wrap,
.vab-single-wrap{
    width:min(calc(100% - 48px),1380px);
    margin:0 auto;
}

.vab-archive{
    position:relative;
    left:50%;
    width:100vw;
    max-width:100vw;
    margin-left:-50vw;
    padding:clamp(72px,7vw,112px) 0;
    background:var(--paper);
}

.vab-archive-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(330px,.56fr);
    align-items:end;
    gap:clamp(38px,7vw,100px);
    margin-bottom:40px;
}

.vab-eyebrow{
    margin:0 0 11px;
    color:var(--olive);
    font:700 10px/1.2 var(--body);
    letter-spacing:.18em;
    text-transform:uppercase;
}

.vab-archive-title,
.vab-single-title{
    margin:0;
    color:var(--vine);
    font-family:var(--heading);
    font-weight:500;
    letter-spacing:-.035em;
}

.vab-archive-title{
    font-size:clamp(48px,4.8vw,70px);
    line-height:.96;
}

.vab-archive-intro{
    max-width:570px;
    margin:0;
    color:rgba(48,43,40,.68);
    font:400 15px/1.78 var(--body);
}

.vab-filters{
    display:grid;
    grid-template-columns:minmax(240px,1fr) minmax(220px,.55fr) auto auto;
    gap:10px;
    align-items:end;
    margin-bottom:34px;
    padding:17px;
    background:var(--cream);
    border:1px solid rgba(107,111,78,.16);
}

.vab-field{
    display:grid;
    gap:7px;
}

.vab-field span{
    color:var(--olive-dark);
    font:700 9px/1 var(--body);
    letter-spacing:.11em;
    text-transform:uppercase;
}

.vab-field input,
.vab-field select{
    width:100%;
    min-height:48px;
    padding:0 14px;
    border:1px solid rgba(107,111,78,.32);
    border-radius:0;
    outline:0;
    background:var(--paper);
    color:var(--ink);
    font:500 14px/1.2 var(--body);
}

.vab-field input:focus,
.vab-field select:focus{border-color:var(--olive)}

.vab-filter-button,
.vab-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 18px;
    border:1px solid var(--olive);
    border-radius:0;
    background:var(--olive);
    color:var(--cream);
    font:700 10px/1 var(--body);
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer;
}

.vab-clear{
    display:inline-flex;
    align-items:center;
    min-height:48px;
    color:var(--olive);
    font:700 10px/1 var(--body);
    letter-spacing:.09em;
    text-transform:uppercase;
}

.vab-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:36px 18px;
}

.vab-card{
    min-width:0;
    padding-top:13px;
    border-top:1px solid rgba(107,111,78,.21);
}

.vab-card-image{
    display:block;
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--stone);
}

.vab-card-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.vab-card:hover .vab-card-image img{transform:scale(1.025)}

.vab-image-fallback{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    padding:25px;
    background:
        linear-gradient(135deg,rgba(91,30,45,.08),rgba(107,111,78,.14)),
        var(--stone-soft);
    color:var(--vine);
    text-align:center;
    font:500 30px/1 var(--heading);
}

.vab-card-body{padding-top:15px}

.vab-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-bottom:8px;
    color:rgba(107,111,78,.72);
    font:700 9px/1.35 var(--body);
    letter-spacing:.1em;
    text-transform:uppercase;
}

.vab-card-title{
    margin:0;
    color:var(--vine);
    font:500 clamp(28px,2.3vw,35px)/1.04 var(--heading);
    letter-spacing:-.02em;
}

.vab-card-title a{color:inherit}

.vab-card-excerpt{
    margin:12px 0 0;
    color:rgba(48,43,40,.67);
    font:400 14px/1.72 var(--body);
}

.vab-read-more{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:17px;
    color:var(--olive);
    font:700 10px/1 var(--body);
    letter-spacing:.1em;
    text-transform:uppercase;
}

.vab-read-more:after{
    content:"→";
    font-size:16px;
}

.vab-pagination{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:18px;
    margin-top:52px;
    padding-top:22px;
    border-top:1px solid rgba(107,111,78,.18);
}

.vab-page-arrow{
    color:var(--olive);
    font:700 10px/1 var(--body);
    letter-spacing:.08em;
    text-transform:uppercase;
}

.vab-pagination > :last-child{text-align:right}

.vab-page-numbers{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.vab-page-numbers a,
.vab-page-numbers span{
    display:grid;
    place-items:center;
    min-width:36px;
    height:36px;
    color:var(--olive-dark);
    font:600 12px/1 var(--body);
}

.vab-page-numbers .is-current{
    background:var(--olive);
    color:var(--cream);
}

.vab-empty{
    padding:70px 30px;
    background:var(--cream);
    text-align:center;
}

.vab-empty h2{
    margin:0;
    color:var(--vine);
    font:500 clamp(38px,4vw,54px)/1 var(--heading);
}

.vab-empty p:not(.vab-eyebrow){
    margin:13px 0 22px;
    color:var(--muted);
    font:400 15px/1.7 var(--body);
}

/* SINGLE */
.vab-single{
    position:relative;
    left:50%;
    width:100vw;
    max-width:100vw;
    margin-left:-50vw;
    background:var(--paper);
}

.vab-single-hero{
    padding:clamp(55px,7vw,94px) 0 clamp(48px,6vw,80px);
    background:var(--cream);
}

.vab-back{
    display:inline-flex;
    margin-bottom:28px;
    color:var(--olive);
    font:700 10px/1 var(--body);
    letter-spacing:.1em;
    text-transform:uppercase;
}

.vab-single-head-grid{
    display:grid;
    grid-template-columns:minmax(0,920px);
}

.vab-single-title{
    max-width:1000px;
    font-size:clamp(52px,6vw,86px);
    line-height:.94;
}

.vab-single-deck{
    max-width:760px;
    margin:24px 0 0;
    color:var(--olive-dark);
    font:500 clamp(22px,2vw,30px)/1.22 var(--heading);
}

.vab-byline{
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    margin-top:27px;
    color:rgba(48,43,40,.58);
    font:600 11px/1.4 var(--body);
}

.vab-single-featured{
    width:min(calc(100% - 48px),1480px);
    max-height:760px;
    margin:0 auto;
    overflow:hidden;
    background:var(--stone);
}

.vab-single-featured img{
    display:block;
    width:100%;
    max-height:760px;
    object-fit:cover;
}

.vab-article-layout{
    padding:clamp(58px,7vw,96px) 0;
}

.vab-article-content{
    width:min(100%,820px);
    margin:0 auto;
    color:#3d3733;
    font:400 17px/1.9 var(--body);
}

.vab-article-content > *:first-child{margin-top:0}
.vab-article-content > *:last-child{margin-bottom:0}

.vab-article-content h2,
.vab-article-content h3,
.vab-article-content h4{
    color:var(--vine);
    font-family:var(--heading);
    font-weight:500;
    line-height:1.05;
    letter-spacing:-.02em;
}

.vab-article-content h2{
    margin:52px 0 18px;
    font-size:clamp(36px,4vw,52px);
}

.vab-article-content h3{
    margin:38px 0 14px;
    font-size:clamp(29px,3vw,39px);
}

.vab-article-content h4{
    margin:32px 0 12px;
    font-size:28px;
}

.vab-article-content p{margin:0 0 23px}
.vab-article-content ul,
.vab-article-content ol{margin:0 0 25px;padding-left:24px}
.vab-article-content li{margin-bottom:9px}

.vab-article-content a{
    color:var(--olive);
    text-decoration:underline;
    text-underline-offset:3px;
}

.vab-article-content blockquote{
    margin:38px 0;
    padding:7px 0 7px 25px;
    border-left:3px solid var(--gold);
    color:var(--vine);
    font:500 clamp(25px,2.5vw,34px)/1.28 var(--heading);
}

.vab-article-content img{
    max-width:100%;
    height:auto;
}

.vab-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:45px;
    padding-top:25px;
    border-top:1px solid rgba(107,111,78,.18);
}

.vab-tags a{
    padding:8px 11px;
    border:1px solid rgba(107,111,78,.27);
    color:var(--olive-dark);
    text-decoration:none;
    font:600 10px/1.2 var(--body);
}

.vab-post-nav{
    padding:34px 0;
    background:var(--stone-soft);
}

.vab-post-nav-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.vab-post-nav-grid > div:last-child{text-align:right}

.vab-post-nav-link{
    display:inline-grid;
    gap:6px;
    max-width:520px;
}

.vab-post-nav-link span{
    color:var(--olive);
    font:700 9px/1.2 var(--body);
    letter-spacing:.11em;
    text-transform:uppercase;
}

.vab-post-nav-link strong{
    color:var(--vine);
    font:500 clamp(24px,2.2vw,32px)/1.08 var(--heading);
}

.vab-related{
    padding:clamp(65px,7vw,95px) 0;
    background:var(--paper);
}

.vab-related-head{
    margin-bottom:32px;
}

.vab-related-head h2{
    margin:0;
    color:var(--vine);
    font:500 clamp(40px,4vw,58px)/1 var(--heading);
    letter-spacing:-.03em;
}

.vab-admin-note{
    padding:20px;
    border:1px solid #e0b35c;
    background:#fff8e7;
    color:#4b3d22;
    font:14px/1.6 Arial,sans-serif;
}

@media(max-width:980px){
    .vab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .vab-filters{grid-template-columns:1fr 1fr}
    .vab-filter-button,.vab-clear{min-height:46px}
}

@media(max-width:720px){
    .vab-wrap,
    .vab-single-wrap{width:calc(100% - 30px)}

    .vab-archive-head{grid-template-columns:1fr;gap:18px}
    .vab-grid{grid-template-columns:1fr}
    .vab-filters{grid-template-columns:1fr}
    .vab-pagination{grid-template-columns:1fr;text-align:center}
    .vab-pagination > :last-child{text-align:center}
    .vab-page-numbers{order:-1}
    .vab-single-featured{width:calc(100% - 30px)}
    .vab-post-nav-grid{grid-template-columns:1fr;gap:28px}
    .vab-post-nav-grid > div:last-child{text-align:left}
}

@media(max-width:480px){
    .vab-archive{padding:58px 0}
    .vab-archive-title{font-size:46px}
    .vab-single-title{font-size:48px}
    .vab-article-content{font-size:16px;line-height:1.82}
}