/*
Theme Name: Vrindavan Staycation Blog
Theme URI: https://vrindavanstaycation.com/blog/
Author: Vrindavan Staycation
Author URI: https://vrindavanstaycation.com/
Description: The blog at vrindavanstaycation.com/blog/, dressed as the rest of the site. It loads the main site's own header, footer, cookie notice, fonts, stylesheet and script from the site's files, so the two never drift apart; this theme adds only the blog's pages. Works with the block editor and with the Classic Editor plugin, whose toolbar gets Font and Size menus: the site's own fonts, 14 more the theme hosts itself, and the common device fonts.
Version: 1.3.7
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vrindavan-staycation
*/

/* ==========================================================================
   The main site's style.css loads first and sets the header, footer, dock, cookie card, fonts and the
   buttons borrowed from its thank-you page (.ty-btn, .ty-reserve). Everything below is the blog's own and
   is scoped to body.vsb or to .vsb-* classes. Palette and type are the site's:
     dark brown #33291c (headings), brown #4A3A28 (text), gold #B08D57, amber #D4A24C,
     label brown #7f6436, link brown #6d4f22, cream #f8f5f0, paper #fffdf9, hairline #e8e0d2,
     focus ring #96713f; Playfair Display for headings, Lato for text.
   ========================================================================== */

/* ---- page frame ----------------------------------------------------------- */
.vsb .vsb-main { display: block; background: #fff; }

/* WordPress's admin bar (signed-in writers only) sits above the sticky header */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
    .admin-bar .site-header { top: 0; }   /* the bar scrolls away on phones */
}

/* no reservation rail on the blog, so the cookie card keeps to the corner (as on the thank-you page) */
@media (min-width: 769px) {
    .vsb .cc-notice { left: 22px; }
}
/* the floating dock sat over the right edge of the text on phones and tablets, as on the legal pages;
   every post ends with the call and WhatsApp pair, and the header keeps its call and BOOK NOW */
@media not all and (min-width: 1024px) {   /* the exact complement of the 1024px rules below: no gap at 1023.5px */
    .vsb .fd-dock { display: none; }
}

.vsb .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.vsb-skip {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 1100;
    padding: 10px 16px;
    border-radius: 4px;
    background: #33291c;
    color: #fff;
    font-family: var(--secondary-font);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}
.vsb-skip:focus { top: 12px; outline: 2px solid #D4A24C; outline-offset: 2px; }

/* ---- shared type ---------------------------------------------------------- */
.vsb-eyebrow {
    margin: 0 0 12px;
    font-family: var(--secondary-font);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #7f6436;
}
.vsb-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(176, 141, 87, 0.55); }
.vsb-eyebrow a:hover,
.vsb-eyebrow a:focus-visible { color: #33291c; border-bottom-color: #D4A24C; }
.vsb-title {
    margin: 0;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 2.9rem);
    line-height: 1.15;
    color: #33291c;
    overflow-wrap: break-word;
}
.vsb-lead {
    margin: 16px auto 0;
    max-width: 34em;
    font-family: var(--primary-font);
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.45;
    color: #4A3A28;
}
.vsb-lead p { margin: 0; color: inherit; }
.vsb-rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 26px auto 0;
    background: linear-gradient(90deg, rgba(212, 162, 76, 0.15), #D4A24C, rgba(212, 162, 76, 0.15));
}
/* focus ring for the blog's own links; the header, footer and dock (outside <main>) keep the main site's */
.vsb-main a:focus-visible { outline: 2px solid #96713f; outline-offset: 2px; }
.vsb-prose a:focus-visible,
.vsb-crumbs a:focus-visible,
.vsb-eyebrow a:focus-visible,
.vsb-card-cat:focus-visible { border-radius: 2px; }

/* ---- breadcrumb ----------------------------------------------------------- */
.vsb-crumbs { margin: 0 0 22px; font-family: var(--secondary-font); font-size: 0.8rem; line-height: 1.5; color: #6a5f52; }
.vsb-crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.vsb-crumbs li { margin: 0; padding: 0; }
.vsb-crumbs li + li::before { content: "/"; margin: 0 9px; color: #B08D57; }
.vsb-crumbs a { color: #6d4f22; text-decoration: none; border-bottom: 1px solid rgba(176, 141, 87, 0.45); }
.vsb-crumbs a:hover { color: #1c1713; border-bottom-color: currentColor; }

/* ---- cream band at the top of lists, search and 404 ------------------------ */
.vsb-hero {
    padding: clamp(36px, 5.5vw, 64px) var(--gut) clamp(34px, 4.5vw, 52px);
    background: #f8f5f0;
    border-bottom: 1px solid #ebe5da;
    text-align: center;
    color: #4A3A28;
}
.vsb-hero-inner { width: min(760px, 100%); margin: 0 auto; }
.vsb-hero .vsb-hero-motif { margin: 0 auto 8px; }
.vsb-hero--404 { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.vsb-hero--404 .ty-actions { margin-top: 26px; }

/* ---- photo banner at the top of the blog's front page (Appearance -> Customize -> Header Image) ---- */
.vsb-banner {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    /* the same size as the homepage's banner (.hero-section): the screen below the header, never under
       550px (450px up to 768px wide) */
    height: calc(100vh - var(--header-height));
    min-height: 550px;
    padding: clamp(56px, 7vw, 96px) var(--gut);
    overflow: hidden;
    background: #33291c;   /* while the photo loads */
    text-align: center;
    color: #fff;
}
.vsb-banner-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}
/* the main site's hero darkens its photo by half; a touch more here, so the small labels hold up over bright stone */
.vsb-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(20, 14, 6, 0.56) 0%, rgba(20, 14, 6, 0.54) 50%, rgba(20, 14, 6, 0.68) 100%);
}
.vsb-banner-inner { width: min(760px, 100%); }
@media (max-width: 768px) {
    .vsb-banner { min-height: 450px; }
}
.vsb-banner .vsb-crumbs { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.vsb-banner .vsb-crumbs a { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }
.vsb-banner .vsb-crumbs a:hover { color: #f3dca8; border-bottom-color: currentColor; }
.vsb-banner .vsb-crumbs li + li::before { color: #D4A24C; }
.vsb-banner .vsb-eyebrow { color: #f7e6c1; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.vsb-banner .vsb-title {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}
.vsb-banner .vsb-lead { color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.vsb-banner .vsb-rule { background: linear-gradient(90deg, rgba(212, 162, 76, 0.2), #D4A24C, rgba(212, 162, 76, 0.2)); }
.vsb-banner a:focus-visible { outline-color: #f0d9a6; }
/* buttons down to the front page's sections (when a featured band is set) */
.vsb-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 28px; }
.vsb-btn-light { border: 1px solid rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.06); color: #fff; }
.vsb-btn-light:hover,
.vsb-btn-light:focus-visible { border-color: #fff; background: rgba(255, 255, 255, 0.16); color: #fff; }
.vsb-hero .vsb-btn-light { border-color: rgba(176, 141, 87, 0.85); background: transparent; color: #4A3A28; }
.vsb-hero .vsb-btn-light:hover,
.vsb-hero .vsb-btn-light:focus-visible { background-color: rgba(176, 141, 87, 0.13); color: #1c1713; }

/* category pills */
.vsb-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.vsb-cats a {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border: 1px solid rgba(176, 141, 87, 0.6);
    border-radius: 999px;
    background: #fffdf9;
    font-family: var(--secondary-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    color: #6d4f22;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.vsb-cats a:hover,
.vsb-cats a:focus-visible { border-color: #D4A24C; background: rgba(212, 162, 76, 0.14); color: #33291c; }
.vsb-cats a[aria-current] { border-color: #33291c; background: #33291c; color: #fff; }

/* search box */
.vsb-search { display: flex; gap: 10px; width: min(480px, 100%); margin: 26px auto 0; }
.vsb-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 20px;
    border: 1px solid rgba(176, 141, 87, 0.6);
    border-radius: 999px;
    background: #fffdf9;
    font-family: var(--secondary-font);
    font-size: 1rem;
    color: #33291c;
    -webkit-appearance: none;
    appearance: none;
}
.vsb-search input[type="search"]::placeholder { color: #6a5f52; opacity: 1; }
.vsb-search input[type="search"]:focus-visible { outline: 2px solid #96713f; outline-offset: 2px; border-color: #96713f; }
.vsb-search .ty-btn { flex: 0 0 auto; cursor: pointer; }

/* ---- lists of posts ------------------------------------------------------- */
.vsb-list { padding: clamp(36px, 5vw, 64px) var(--gut) clamp(56px, 7vw, 96px); }
.vsb-list-inner { width: min(1200px, 100%); margin: 0 auto; }
.vsb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.6vw, 36px);
}
@media (max-width: 1199px) {
    .vsb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* three cards were 256px wide at 1024 */
}
@media (max-width: 639px) {
    .vsb-grid { grid-template-columns: minmax(0, 1fr); }
}

.vsb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #fffdf9;
    box-shadow: 0 0 0 1px rgba(176, 141, 87, 0.32), 0 18px 32px -26px rgba(30, 20, 8, 0.45);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.vsb-card:hover { box-shadow: 0 0 0 1px rgba(176, 141, 87, 0.65), 0 24px 38px -24px rgba(30, 20, 8, 0.5); transform: translateY(-2px); }
.vsb-card:focus-within { box-shadow: 0 0 0 2px #96713f, 0 24px 38px -24px rgba(30, 20, 8, 0.5); }
.vsb-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f1ebe0; }
.vsb-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.vsb-card:hover .vsb-card-media img { transform: scale(1.03); }
.vsb-card-media--blank { display: grid; place-items: center; background: #f8f5f0; }
.vsb-card-media--blank .vsb-card-motif { width: min(150px, 45%); height: auto; object-fit: contain; opacity: 0.9; }
.vsb-card:hover .vsb-card-media--blank .vsb-card-motif { transform: none; }
.vsb-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 22px 22px; }
.vsb-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 10px;
    font-family: var(--secondary-font);
    font-size: 0.8rem;
    line-height: 1.4;
    color: #6a5f52;
}
.vsb-card-cat {
    position: relative;
    z-index: 2;   /* above the card-wide title link */
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    color: #7f6436;
}
.vsb-card-cat:hover { color: #33291c; text-decoration: underline; text-underline-offset: 3px; }
.vsb-card-title {
    margin: 0 0 10px;
    font-family: var(--primary-font);
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.3;
    color: #33291c;
    overflow-wrap: break-word;
}
.vsb-card-title a { color: inherit; text-decoration: none; }
.vsb-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card is the link */
.vsb-card-title a:focus-visible { outline: 2px solid transparent; }   /* the card's ring (:focus-within) shows focus; Windows
                                                                         high-contrast mode paints this outline instead */
.vsb-card:hover .vsb-card-title a { color: #6d4f22; }
.vsb-card-excerpt {
    margin: 0 0 18px;
    font-family: var(--secondary-font);
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4A3A28;
}
.vsb-card-more {
    margin-top: auto;
    font-family: var(--secondary-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6d4f22;
}
.vsb-arrow { display: inline-block; margin-left: 4px; transition: transform 0.25s ease; }
.vsb-card:hover .vsb-arrow { transform: translateX(4px); }

/* the newest post on the blog's first page runs across the row, picture beside the words */
.vsb-card--lead { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .vsb-card--lead { flex-direction: row; }
    .vsb-card--lead .vsb-card-media { flex: 0 0 58%; aspect-ratio: auto; min-height: 340px; }
    .vsb-card--lead .vsb-card-media img:not(.vsb-card-motif) { position: absolute; inset: 0; }   /* the words set the height, not the picture */
    .vsb-card--lead .vsb-card-media--blank .vsb-card-motif { width: min(220px, 45%); }
    .vsb-card--lead .vsb-card-body { justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
    .vsb-card--lead .vsb-card-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.2; }
    .vsb-card--lead .vsb-card-excerpt { font-size: 1.02rem; }
    .vsb-card--lead .vsb-card-more { margin-top: 6px; }
}

/* ---- the front page's list, from 1200px: the newest post across four of six columns and two rows, the
   next two stacked beside it, then rows of three (as on jagritidham.com's blog) ---- */
@media (min-width: 1200px) {
    .vsb-grid--front { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .vsb-grid--front > .vsb-card { grid-column: span 2; }
    .vsb-grid--front > .vsb-card--lead { grid-column: 1 / span 4; grid-row: 1 / span 2; flex-direction: column; }
    .vsb-grid--front > .vsb-card--lead .vsb-card-media { flex: 0 0 auto; aspect-ratio: 4 / 3; min-height: 0; }
    .vsb-grid--front > .vsb-card--lead .vsb-card-body { justify-content: flex-start; padding: 26px 32px 30px; }
    .vsb-grid--front > .vsb-card--lead .vsb-card-title { font-size: clamp(1.9rem, 2.5vw, 2.4rem); line-height: 1.16; }
    .vsb-grid--front > .vsb-card--lead .vsb-card-excerpt { font-size: 1.05rem; }
    .vsb-grid--front > .vsb-card--lead + .vsb-card .vsb-card-media,
    .vsb-grid--front > .vsb-card--lead + .vsb-card + .vsb-card .vsb-card-media { aspect-ratio: 16 / 9; }
    .vsb-grid--front > .vsb-card--lead + .vsb-card .vsb-card-excerpt,
    .vsb-grid--front > .vsb-card--lead + .vsb-card + .vsb-card .vsb-card-excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    /* one post alone runs the whole row, picture beside the words; two (home.php gives neither the featured
       card) share the row as equals, each across three of the six columns */
    .vsb-grid--front > .vsb-card--lead:only-child { grid-column: 1 / -1; grid-row: auto; flex-direction: row; }
    .vsb-grid--front > .vsb-card--lead:only-child .vsb-card-media { flex: 0 0 58%; aspect-ratio: auto; min-height: 400px; }
    .vsb-grid--front > .vsb-card--lead:only-child .vsb-card-body { justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
    .vsb-grid--front > .vsb-card:first-child:nth-last-child(2),
    .vsb-grid--front > .vsb-card:first-child:nth-last-child(2) + .vsb-card { grid-column: span 3; }
    .vsb-grid--front > .vsb-card:first-child:nth-last-child(2) .vsb-card-body,
    .vsb-grid--front > .vsb-card:first-child:nth-last-child(2) + .vsb-card .vsb-card-body { padding: 24px 28px 28px; }
    .vsb-grid--front > .vsb-card:first-child:nth-last-child(2) .vsb-card-title,
    .vsb-grid--front > .vsb-card:first-child:nth-last-child(2) + .vsb-card .vsb-card-title { font-size: 1.5rem; line-height: 1.25; }
    .vsb-grid--front > .vsb-card:first-child:nth-last-child(2) .vsb-card-excerpt,
    .vsb-grid--front > .vsb-card:first-child:nth-last-child(2) + .vsb-card .vsb-card-excerpt { font-size: 1rem; }
    /* long titles stop at three lines in the smaller cards (the whole title stays on the post itself) */
    .vsb-grid--front > .vsb-card:not(.vsb-card--lead) .vsb-card-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}

/* ---- section headings on the front page ------------------------------------ */
.vsb-latest,
.vsb-band { scroll-margin-top: var(--header-height); }
.vsb-section-head { margin: 0 0 clamp(26px, 3.5vw, 38px); }
.vsb-section-title {
    margin: 0;
    font-family: var(--primary-font);
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: #33291c;
}
.vsb-section-intro { margin: 10px 0 0; max-width: 60ch; font-family: var(--secondary-font); font-size: 1rem; line-height: 1.55; color: #6a5f52; }
.vsb-section-head .vsb-rule { margin: 18px 0 0; background: linear-gradient(90deg, #D4A24C, rgba(212, 162, 76, 0.15)); }
.vsb-latest .vsb-empty { text-align: left; }
.vsb-latest .vsb-empty .ty-actions { justify-content: flex-start; }

/* ---- the featured band: one category's posts as cream cards on dark brown ---- */
.vsb-band {
    padding: clamp(48px, 6vw, 80px) var(--gut) clamp(56px, 7vw, 88px);
    background: #33291c;
    border-top: 1px solid rgba(212, 162, 76, 0.45);
    border-bottom: 1px solid rgba(212, 162, 76, 0.45);
}
.vsb-band-inner { width: min(1040px, 100%); margin: 0 auto; }
.vsb-band .vsb-section-head { padding-top: 16px; border-top: 4px double #B08D57; }
.vsb-band .vsb-section-title { color: #fff; }
.vsb-band .vsb-section-intro { color: rgba(248, 245, 240, 0.82); }
.vsb-grid.vsb-grid--band { grid-template-columns: minmax(0, 1fr); gap: 26px 32px; }
@media (min-width: 768px) {
    .vsb-grid.vsb-grid--band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; }
}
.vsb-grid--band > .vsb-card { box-shadow: 0 0 0 1px #B08D57, 0 30px 40px -30px rgba(0, 0, 0, 0.6); }
.vsb-band-more { margin: 34px 0 0; text-align: center; }
.vsb-band-more a {
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(240, 217, 166, 0.55);
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: #f0d9a6;
}
.vsb-band-more a:hover,
.vsb-band-more a:focus-visible { color: #fff; border-bottom-color: #fff; }
.vsb-band-more a:focus-visible { outline-color: #f0d9a6; }
/* band cards: the card-wide focus ring, in a colour that shows on the dark band */
.vsb-grid--band > .vsb-card:focus-within { box-shadow: 0 0 0 3px #f0d9a6, 0 30px 40px -30px rgba(0, 0, 0, 0.6); }

/* ---- "Browse the blog": ruled rows, the label on the left, the list in columns ---- */
.vsb-index { padding: clamp(40px, 6vw, 72px) var(--gut) clamp(44px, 6vw, 76px); background: #f8f5f0; border-top: 1px solid #ebe5da; }
.vsb-index-inner { width: min(1200px, 100%); margin: 0 auto; border-top: 2px solid #7f6436; }
.vsb-index-row { padding: 20px 0 18px; border-bottom: 1px solid #e3dccf; }
.vsb-index-title {
    margin: 0 0 4px;
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7f6436;
}
.vsb-index-list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 24px;
}
.vsb-index-list li {
    margin: 0;
    padding: 9px 0;
    break-inside: avoid;
    font-family: var(--secondary-font);
    font-size: 0.85rem;
    line-height: 1.4;
    color: #6a5f52;
    font-variant-numeric: lining-nums tabular-nums;
}
.vsb-index-list a { font-size: 0.95rem; color: #33291c; text-decoration: none; }
.vsb-index-recent a { font-family: var(--primary-font); font-size: 1.02rem; line-height: 1.35; }
.vsb-index-list a:hover,
.vsb-index-list a:focus-visible { color: #6d4f22; text-decoration: underline; text-decoration-color: rgba(176, 141, 87, 0.85); text-underline-offset: 4px; }
@media (min-width: 768px) {
    .vsb-index-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 28px; padding: 22px 0 20px; }
    .vsb-index-title { margin: 0; padding-top: 12px; }
    .vsb-index-list { column-gap: 32px; column-rule: 1px solid #e3dccf; }
    .vsb-index-list li { padding: 12px 0; }
}
@media (min-width: 992px) {
    .vsb-index-row { grid-template-columns: 190px minmax(0, 1fr); column-gap: 36px; }
    .vsb-index-list { columns: 3; }
}
@media (min-width: 1200px) {
    .vsb-index-list { column-gap: 40px; }
    .vsb-index-cats,
    .vsb-index-arch { columns: 4; }
}

/* Windows high-contrast mode drops box-shadows: a real outline marks the focused card there */
@media (forced-colors: active) {
    .vsb-card:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .vsb-card, .vsb-card-media img, .vsb-arrow { transition: none; }
    .vsb-card:hover { transform: none; }
    .vsb-card:hover .vsb-card-media img, .vsb-card:hover .vsb-arrow { transform: none; }
}

/* page numbers */
.vsb-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(40px, 5vw, 56px); }
.vsb-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(176, 141, 87, 0.5);
    border-radius: 999px;
    font-family: var(--secondary-font);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    color: #6d4f22;
}
.vsb-pagination a.page-numbers:hover { border-color: #D4A24C; background: rgba(212, 162, 76, 0.14); color: #33291c; }
.vsb-pagination .page-numbers.current { border-color: #33291c; background: #33291c; color: #fff; }
.vsb-pagination .page-numbers.dots { border-color: transparent; }

/* an empty list */
.vsb-empty { padding: clamp(12px, 3vw, 32px) 0; text-align: center; }
.vsb-empty-title { margin: 0 0 10px; font-family: var(--primary-font); font-size: clamp(1.4rem, 2.6vw, 1.8rem); color: #33291c; }
.vsb-empty p { margin: 0 auto; max-width: 32em; color: #4A3A28; }
.vsb-empty .ty-actions { margin-top: 26px; }

/* ---- one post ------------------------------------------------------------- */
.vsb-post-head {
    padding: clamp(36px, 5.5vw, 68px) var(--gut) clamp(30px, 4vw, 46px);
    background: #f8f5f0;
    text-align: center;
}
.vsb-post-head-inner { width: min(800px, 100%); margin: 0 auto; }
.vsb-post-head .vsb-title { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.vsb-post-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    margin: 16px 0 0;
    font-family: var(--secondary-font);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6a5f52;
}
.vsb-dot { width: 4px; height: 4px; border-radius: 50%; background: #B08D57; }
.vsb-views { font-variant-numeric: lining-nums tabular-nums; }
/* the featured image straddles the cream band's lower edge */
.vsb-post-head--cover { padding-bottom: 0; }
.vsb-post-cover-band {
    padding: clamp(28px, 3.5vw, 40px) var(--gut) 0;
    background: linear-gradient(#f8f5f0 0, #f8f5f0 55%, #fff 55%);
}
.vsb-post-cover { width: min(1040px, 100%); margin: 0 auto; }
.vsb-post-cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(176, 141, 87, 0.3), 0 26px 44px -30px rgba(30, 20, 8, 0.55);
}
.vsb-post-cover figcaption { margin-top: 10px; font-family: var(--secondary-font); font-size: 0.85rem; line-height: 1.5; text-align: center; color: #6a5f52; }

.vsb-post-body { padding: clamp(34px, 5vw, 56px) var(--gut) clamp(52px, 7vw, 88px); overflow-x: clip; }

/* the text: as wide as the picture at the top of the post (1040px), in Lato; 18px from 1200px so the
   wide lines stay easy to read */
.vsb-prose {
    width: min(1040px, 100%);
    margin: 0 auto;
    font-family: var(--secondary-font);
    font-size: 1rem;
    line-height: 1.75;
    color: #4A3A28;
    overflow-wrap: break-word;
}
@media (min-width: 1024px) {
    .vsb-prose { font-size: 1.0625rem; }
}
@media (min-width: 1200px) {
    .vsb-prose { font-size: 1.125rem; }
}
@media (max-width: 575px) {
    .vsb-prose { font-size: 0.97rem; }
}
.vsb-prose p { margin: 0 0 1.15em; font-size: inherit; line-height: inherit; color: inherit; }
.vsb-prose h2,
.vsb-prose h3,
.vsb-prose h4,
.vsb-prose h5,
.vsb-prose h6 { color: #33291c; scroll-margin-top: calc(var(--header-height) + 16px); overflow-wrap: break-word; }
.vsb-prose h2 { margin: 1.9em 0 0.6em; font-family: var(--primary-font); font-size: clamp(1.45rem, 2.4vw, 1.75rem); line-height: 1.3; }
.vsb-prose h3 { margin: 1.6em 0 0.5em; font-family: var(--primary-font); font-size: clamp(1.18rem, 1.9vw, 1.35rem); line-height: 1.35; }
.vsb-prose h4 { margin: 1.5em 0 0.45em; font-family: var(--secondary-font); font-size: 1.02em; letter-spacing: 0.02em; line-height: 1.45; }
.vsb-prose h5,
.vsb-prose h6 { margin: 1.4em 0 0.4em; font-family: var(--secondary-font); font-size: 0.78em; letter-spacing: 1.8px; text-transform: uppercase; color: #7f6436; }
.vsb-prose > :first-child { margin-top: 0; }
.vsb-prose a {
    color: #6d4f22;
    text-decoration: underline;
    text-decoration-color: rgba(176, 141, 87, 0.85);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.vsb-prose a:hover,
.vsb-prose a:focus-visible { color: #1c1713; text-decoration-color: currentColor; }
.vsb-prose strong, .vsb-prose b { font-weight: 700; color: #33291c; }
.vsb-prose ul,
.vsb-prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.vsb-prose li { margin: 0 0 0.45em; padding-left: 0.2em; }
.vsb-prose li > ul,
.vsb-prose li > ol { margin: 0.45em 0 0; }
.vsb-prose li::marker { color: #B08D57; }
.vsb-prose ol > li::marker { font-weight: 700; }
.vsb-prose blockquote,
.vsb-prose .wp-block-quote {
    margin: 1.7em 0;
    padding: 2px 0 2px 22px;
    border-left: 2px solid #D4A24C;
    font-family: var(--primary-font);
    font-size: 1.18em;
    line-height: 1.55;
    color: #33291c;
}
.vsb-prose blockquote p { margin-bottom: 0.6em; }
.vsb-prose blockquote p:last-child { margin-bottom: 0; }
.vsb-prose cite,
.vsb-prose blockquote .wp-block-quote__citation {
    display: block;
    margin-top: 0.7em;
    font-family: var(--secondary-font);
    font-size: 0.62em;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #7f6436;
}
.vsb-prose .wp-block-pullquote {
    margin: 2em 0;
    padding: 1.4em 0;
    border-top: 1px solid rgba(176, 141, 87, 0.55);
    border-bottom: 1px solid rgba(176, 141, 87, 0.55);
    text-align: center;
}
.vsb-prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; font-size: 1.3em; }
.vsb-prose figure { margin: 1.8em 0; }
.vsb-prose img { height: auto; border-radius: 4px; }
.vsb-prose figcaption,
.vsb-prose .wp-element-caption {
    margin-top: 0.6em;
    font-family: var(--secondary-font);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    color: #6a5f52;
}
/* pictures fill the text column. WordPress puts a picture in at the size picked in the editor - often
   Medium, 300px wide - which looked tiny in a 1040px column. Left alone: pictures floated left or right,
   ones a writer resized by hand (is-resized, with their own width), Thumbnails (a 150px square crop with no
   larger copy of that shape - stretched it would be a blurry 1040px square), Wide / Full width ones (own rules
   below), and pictures in a Gallery block, which the gallery sizes. functions.php tells the browser how wide
   each picture really shows, so it fetches a copy large enough to stay sharp. */
.vsb-prose > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail),
.vsb-prose :not(.wp-block-gallery) > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail),
.vsb-prose .wp-block-image > figure:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail) { display: block; width: 100%; }
.vsb-prose > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail) > img,
.vsb-prose > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail) > a > img,
.vsb-prose :not(.wp-block-gallery) > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail) > img,
.vsb-prose :not(.wp-block-gallery) > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail) > a > img,
.vsb-prose .wp-block-image > figure:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail) img,
.vsb-prose p > img[class*="wp-image-"][class*="size-"]:not(.alignleft):not(.alignright):not(.size-thumbnail),
.vsb-prose p > a > img[class*="wp-image-"][class*="size-"]:not(.alignleft):not(.alignright):not(.size-thumbnail) { display: block; width: 100%; height: auto; }
/* their captions sit under them across the column (core makes a centred picture's caption a table caption,
   which in a full-width figure became a one-word-wide strip); the same exclusions, so this outranks core */
.vsb-prose > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail) > figcaption,
.vsb-prose :not(.wp-block-gallery) > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail) > figcaption,
.vsb-prose .wp-block-image > figure:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-resized):not(.size-thumbnail) > figcaption { display: block; }
/* a small picture put inside a sentence (the editor's inline image: no size- class) stays in the line; the
   main site's stylesheet makes every <img> a block, which would break the sentence around it */
.vsb-prose p img:not([class*="size-"]):not(.alignleft):not(.alignright):not(.aligncenter),
.vsb-prose li img:not([class*="size-"]):not(.alignleft):not(.alignright):not(.aligncenter) { display: inline-block; vertical-align: middle; }
/* wide blocks start below a picture floated left or right, rather than squeezing in beside it */
.vsb-prose > .wp-block-image:not(.alignleft):not(.alignright),
.vsb-prose > .wp-block-gallery,
.vsb-prose > .wp-block-columns,
.vsb-prose > .wp-block-table,
.vsb-prose > .vsb-table-scroll,
.vsb-prose > .wp-block-embed,
.vsb-prose > .wp-block-video,
.vsb-prose > .wp-block-separator,
.vsb-prose > hr { clear: both; }
/* the old [caption] box carries its width inline */
.vsb-prose .wp-caption:not(.alignleft):not(.alignright):not(:has(img.size-thumbnail)) { width: 100% !important; max-width: 100%; }
.vsb-prose .wp-caption:not(.alignleft):not(.alignright):not(:has(img.size-thumbnail)) img { display: block; width: 100%; height: auto; }
.vsb-prose .wp-caption-text { margin-top: 0.6em; font-size: 0.85rem; line-height: 1.5; text-align: center; color: #6a5f52; }

/* "Wide width" pictures step out of the text column; "Full width" ones run edge to edge */
.vsb-prose .alignwide {
    position: relative;
    left: 50%;
    width: min(1200px, 100vw - 2 * var(--gut));
    max-width: none;
    transform: translateX(-50%);
}
.vsb-prose .alignfull {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
}
.vsb-prose .alignfull img { border-radius: 0; }
.vsb-prose .alignleft { float: left; max-width: 50%; margin: 0.35em 1.5em 1em 0; }
.vsb-prose .alignright { float: right; max-width: 50%; margin: 0.35em 0 1em 1.5em; }
.vsb-prose .aligncenter { margin-left: auto; margin-right: auto; }
@media (max-width: 575px) {
    .vsb-prose .alignleft,
    .vsb-prose .alignright { float: none; max-width: 100%; margin: 1.6em 0; }
}
.vsb-prose::after { content: ""; display: table; clear: both; }
/* Tables, from either editor: a light grid in the site's sand colour, so rows and columns both read. Tables
   pasted in from Google Docs or Word bring a fixed height (style="height: 394px") that stretched every row:
   they size to their text instead. A table wider than the column scrolls sideways in its own box
   (functions.php vsb_table_scroll()) rather than being cut off on a phone. */
.vsb-prose .vsb-table-scroll { margin: 1.8em 0; padding-right: 1px; overflow-x: auto; }   /* 1px: Chrome stops a sideways scroll a fraction short, which hid the right border */
.vsb-prose .wp-block-table .vsb-table-scroll { margin: 0; }
.vsb-prose table { width: 100%; height: auto !important; border-collapse: collapse; border: 1px solid #d8c9ad; font-size: 0.93em; line-height: 1.55; background: #fffdf9; }
.vsb-prose .wp-block-table { overflow-x: auto; }
.vsb-prose tr { height: auto !important; }
.vsb-prose th,
.vsb-prose td { height: auto !important; padding: 10px 14px; text-align: left; vertical-align: top; border: 1px solid #d8c9ad; }
.vsb-prose th > :first-child,
.vsb-prose td > :first-child { margin-top: 0; }
.vsb-prose th > :last-child,
.vsb-prose td > :last-child { margin-bottom: 0; }
/* WordPress's table block draws a dark grid and a 3px rule under the head; the same light grid instead */
.vsb-prose .wp-block-table th,
.vsb-prose .wp-block-table td { border: 1px solid #d8c9ad; }
.vsb-prose .wp-block-table thead,
.vsb-prose .wp-block-table tfoot { border: 0; }
@media (max-width: 575px) {
    .vsb-prose th,
    .vsb-prose td { padding: 8px 10px; }
}
.vsb-prose th { font-weight: 700; color: #33291c; background: #f1ebe0; }
.vsb-prose hr,
.vsb-prose .wp-block-separator {
    width: 64px;
    height: 1px;
    margin: 2.4em auto;
    border: 0;
    background: linear-gradient(90deg, rgba(212, 162, 76, 0.15), #D4A24C, rgba(212, 162, 76, 0.15));
    opacity: 1;
}
.vsb-prose .wp-block-separator.is-style-wide { width: 100%; background: #e8e0d2; }
.vsb-prose code,
.vsb-prose kbd {
    padding: 0.1em 0.35em;
    border-radius: 3px;
    background: #f4efe6;
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: 0.88em;
    color: #33291c;
}
.vsb-prose pre {
    margin: 0 0 1.15em;
    padding: 16px 18px;
    overflow-x: auto;
    border-radius: 4px;
    background: #f4efe6;
    font-size: 0.88em;
    line-height: 1.6;
}
.vsb-prose pre code { padding: 0; background: none; }
.vsb-prose .wp-block-embed,
.vsb-prose .wp-block-video,
.vsb-prose .wp-block-gallery,
.vsb-prose .wp-block-columns { margin: 1.8em 0; }
.vsb-prose iframe { max-width: 100%; }
/* buttons written in the editor look like the site's amber pill */
.vsb-prose .wp-block-buttons { margin: 1.6em 0; }
.vsb-prose .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 30px;
    border-radius: 999px;
    background-color: #D4A24C;
    color: #111;
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}
.vsb-prose .wp-block-button__link:hover,
.vsb-prose .wp-block-button__link:focus-visible { background-color: #c4923e; color: #111; }
.vsb-prose .is-style-outline > .wp-block-button__link { border: 1px solid rgba(176, 141, 87, 0.85); background: transparent; color: #4A3A28; }
.vsb-page-links { margin-top: 2em; font-weight: 700; }

/* tags under the text */
.vsb-tags { display: flex; flex-wrap: wrap; gap: 8px; width: min(1040px, 100%); margin: clamp(30px, 4vw, 40px) auto 0; }
.vsb-tags a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f4efe6;
    font-family: var(--secondary-font);
    font-size: 0.8rem;
    text-decoration: none;
    color: #6d4f22;
}
.vsb-tags a:hover { background: rgba(212, 162, 76, 0.22); color: #33291c; }

/* "Stay with us" */
.vsb-stay {
    width: min(1040px, 100%);   /* the text column's width */
    margin: clamp(44px, 6vw, 64px) auto 0;
    padding: clamp(30px, 4vw, 44px) clamp(20px, 4vw, 44px) clamp(32px, 4vw, 44px);
    border-radius: 6px;
    background: #f8f5f0;
    box-shadow: 0 0 0 1px rgba(176, 141, 87, 0.4), 0 18px 32px -24px rgba(30, 20, 8, 0.45);
    text-align: center;
}
.vsb-stay .vsb-stay-motif { width: min(120px, var(--flute-w)); margin: 0 auto 6px; }
.vsb-stay-title { margin: 0 0 12px; font-family: var(--primary-font); font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.25; color: #33291c; }
.vsb-stay-text { margin: 0 auto 26px; max-width: 34em; font-family: var(--secondary-font); font-size: 0.98rem; line-height: 1.65; color: #4A3A28; }
.vsb-stay-text strong { font-weight: 700; color: #33291c; }
.vsb-stay .ty-actions { margin-top: 28px; }

/* read next */
.vsb-related {
    padding: clamp(44px, 6vw, 76px) var(--gut) clamp(56px, 7vw, 96px);
    background: #f8f5f0;
    border-top: 1px solid #ebe5da;
    text-align: center;
}
.vsb-related-title { margin: 0 0 clamp(26px, 3.5vw, 40px); font-family: var(--primary-font); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; color: #33291c; }
.vsb-related .vsb-grid { text-align: left; }

/* from 1024px the floating dock sits 76px in from the right edge; up to 1399px it would cover the right-hand
   card, so the lists keep 90px clear on both sides (the grid stays centred).
   After the .vsb-list and .vsb-related rules, whose padding shorthand would otherwise win */
@media (min-width: 1024px) and (max-width: 1399px) {
    .vsb-list,
    .vsb-related,
    .vsb-band,
    .vsb-index,
    .vsb-post-cover-band,
    .vsb-post-body { padding-left: 90px; padding-right: 90px; }   /* the post's picture and text stay the same width */
    .vsb-prose .alignwide { width: min(1200px, 100vw - 180px); }
}

/* if the main site's footer ever cannot be read */
.vsb-footer-fallback { padding: 28px var(--gut, 20px); background: #33291c; color: #f8f5f0; text-align: center; font-size: 0.9rem; }
.vsb-footer-fallback a { color: #D4A24C; }