/*
Theme Name: Vincenzo-Bartender
Theme URI: https://davidgagne.net/tags/wordpress/
Author: David Vincent Gagne
Author URI: https://davidgagne.net/
Description: bartender.live — the marketing site for the home-bar app. The whole site is the app's home screen: the same moody pour photograph, frosted-glass capsules, whiskey-amber light, and American Typewriter drink names on a near-black bar. Bootstrap 5 and Font Awesome.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vincenzo-bartender
Tags: one-column, custom-menu, landing-page
*/

/*---------------------------------------------------------------
-    Title:    Vincenzo-Bartender Stylesheet
-    File:     /style.css
-    Author:   dvg@davidgagne.net
-              (c) 2026 David V. Gagne
-    Version:  0.1.1
-    Created:  TUE AUG 11 2026 @ 02:35:00 EDT
-    Modified: TUE AUG 11 2026 @ 09:20:00 EDT
---------------------------------------------------------------*/

/*-----------------------------------------------------
     Design tokens — every color is sampled from the
     app itself: the home-screen pour photo, the black
     drink lists, the iOS green toggles, the orange
     "missing:" labels. The app is the palette; do not
     invent colors.
-----------------------------------------------------*/
:root {
     --vb-black:      #000000;     /* the drink lists' floor        */
     --vb-coal:       #101114;     /* raised cards                  */
     --vb-chrome:     #1f1f1f;     /* search fields, tab bar        */
     --vb-slate:      #2c333b;     /* the wall behind the bar       */
     --vb-slate-deep: #22262c;
     --vb-hairline:   rgba(255, 255, 255, 0.14);
     --vb-white:      #ffffff;
     --vb-cream:      #f2ead9;     /* warm body text                */
     --vb-dim:        rgba(242, 234, 217, 0.68);
     --vb-faint:      rgba(242, 234, 217, 0.45);
     --vb-amber:      #f1a632;     /* the whiskey                   */
     --vb-amber-hi:   #ffc25e;
     --vb-amber-deep: #c87d1e;
     --vb-orange:     #ff9f0a;     /* the app's "missing:" orange  */
     --vb-green:      #34c759;     /* the "I have this" green      */
     --vb-brass-hi:   #d4b366;     /* bar-top brass                 */
     --vb-brass:      #bc9b6e;
     --vb-brass-mid:  #8c612d;
     --vb-brass-lo:   #5f4a32;
     --vb-brass-ink:  #2a1c08;     /* engraved text on brass        */
     --vb-display:    "American Typewriter", "Cutive", "Courier New", serif;
     --vb-sans:       -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*-----------------------------------------------------
     Base — the bar after close: black floor, a warm
     lamp over the back bar, fine grain in the dark.
-----------------------------------------------------*/
html {
     background-color: var(--vb-black);
}
body {
     font-family: var(--vb-sans);
     color: var(--vb-cream);
     overflow-x: clip;
     background-color: var(--vb-black);
     background-image:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' fill='%23ffffff' opacity='0.028'/%3E%3C/svg%3E");
     font-size: 1.02rem;
     line-height: 1.8;
     min-height: 100vh;
}
body::before {
     content: "";
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
     background:
          radial-gradient(ellipse 85% 50% at 50% -12%, rgba(241, 166, 50, 0.12), transparent 62%),
          radial-gradient(ellipse 120% 90% at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
}
body > * {
     position: relative;
     z-index: 1;
}
::selection {
     background: var(--vb-amber);
     color: #1c1204;
}
h1, h2, h3, h4, h5, h6 {
     font-family: var(--vb-display);
     font-weight: 400;
     color: var(--vb-white);
     line-height: 1.25;
}
a {
     color: var(--vb-amber);
     text-decoration-color: rgba(241, 166, 50, 0.55);
     text-decoration-thickness: 2px;
     text-underline-offset: 3px;
}
a:hover {
     color: var(--vb-amber-hi);
     text-decoration-color: var(--vb-amber-hi);
}
strong {
     color: var(--vb-white);
}
em {
     color: var(--vb-dim);
}
:focus-visible {
     outline: 3px solid var(--vb-amber);
     outline-offset: 2px;
     border-radius: 2px;
}
.vb-skip-link {
     position: absolute;
     top: 0.5rem;
     left: 0.5rem;
     z-index: 100;
     background: var(--vb-chrome);
     color: var(--vb-cream);
     padding: 0.5rem 1rem;
     border-radius: 0.5rem;
}
img {
     max-width: 100%;
     height: auto;
}

/*-----------------------------------------------------
     Kickers, leads, shared type
-----------------------------------------------------*/
.vb-kicker {
     font-family: var(--vb-sans);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.18em;
     font-size: 0.78rem;
     color: var(--vb-amber);
     margin-bottom: 0.75rem;
}
.vb-kicker::before {
     content: "";
     display: inline-block;
     width: 2.2rem;
     height: 2px;
     background: linear-gradient(90deg, var(--vb-amber), rgba(241, 166, 50, 0.15));
     vertical-align: middle;
     margin-right: 0.7rem;
}
.vb-lead {
     font-size: 1.12rem;
     line-height: 1.85;
     color: var(--vb-cream);
     max-width: 58ch;
}
.vb-h2 {
     font-size: clamp(1.6rem, 3.2vw, 2.2rem);
     margin-bottom: 1.2rem;
}
.vb-aside {
     color: var(--vb-dim);
     font-size: 0.95rem;
}

/*-----------------------------------------------------
     Buttons — whiskey amber, and the app's own
     frosted-glass capsule
-----------------------------------------------------*/
.vb-btn {
     display: inline-block;
     font-family: var(--vb-sans);
     font-weight: 600;
     border-radius: 999px;
     padding: 0.75rem 1.7rem;
     text-decoration: none;
     line-height: 1.3;
     transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.vb-btn--amber {
     color: #241503;
     background: linear-gradient(180deg, var(--vb-amber-hi) 0%, var(--vb-amber) 55%, var(--vb-amber-deep) 100%);
     border: 1px solid rgba(120, 74, 10, 0.8);
     box-shadow: 0 3px 0 rgba(90, 55, 8, 0.5), 0 8px 24px rgba(241, 166, 50, 0.22), inset 0 1px 0 rgba(255, 235, 200, 0.5);
}
.vb-btn--amber:hover {
     color: #241503;
     filter: brightness(1.07);
     transform: translateY(-1px);
}
.vb-btn--glass {
     color: var(--vb-white);
     background: rgba(255, 255, 255, 0.13);
     border: 1px solid rgba(255, 255, 255, 0.28);
     -webkit-backdrop-filter: blur(14px);
     backdrop-filter: blur(14px);
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.vb-btn--glass:hover {
     color: var(--vb-white);
     background: rgba(255, 255, 255, 0.19);
     transform: translateY(-1px);
}
.vb-btn--small {
     padding: 0.45rem 1.1rem;
     font-size: 0.9rem;
}

/*-----------------------------------------------------
     Masthead — the floating tab bar, docked up top
-----------------------------------------------------*/
.vb-masthead {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(8, 8, 8, 0.72);
     -webkit-backdrop-filter: blur(14px) saturate(150%);
     backdrop-filter: blur(14px) saturate(150%);
     border-bottom: 1px solid var(--vb-hairline);
}
.vb-masthead__row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     flex-wrap: wrap;
     padding: 0.6rem 0;
}
.vb-brand {
     display: flex;
     align-items: center;
     gap: 0.7rem;
     text-decoration: none;
}
.vb-brand__mark {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     outline: 1px solid rgba(241, 166, 50, 0.4);
     outline-offset: -1px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.vb-brand__words {
     display: flex;
     flex-direction: column;
     line-height: 1.05;
}
.vb-brand__name {
     font-family: var(--vb-display);
     font-size: 1.3rem;
     color: var(--vb-white);
     letter-spacing: 0.01em;
}
.vb-brand__tld {
     color: var(--vb-amber);
}
.vb-brand__sub {
     font-size: 0.64rem;
     text-transform: uppercase;
     letter-spacing: 0.34em;
     color: var(--vb-dim);
}
.vb-nav {
     display: flex;
     align-items: center;
     gap: 1.1rem;
     flex-wrap: wrap;
}
.vb-nav__list {
     display: flex;
     gap: 1.1rem;
     list-style: none;
     margin: 0;
     padding: 0;
}
.vb-nav__link {
     text-decoration: none;
     color: var(--vb-cream);
     font-size: 0.98rem;
     border-bottom: 2px solid transparent;
     padding-bottom: 2px;
}
.vb-nav__link:hover,
.current-menu-item > .vb-nav__link {
     color: var(--vb-white);
     border-bottom-color: var(--vb-amber);
}
.vb-nav__cta i {
     margin-right: 0.25rem;
}

/*-----------------------------------------------------
     Hero — the app's home screen, wall to wall: the
     pour, the brass, the dark slate. The photo is the
     Unsplash original the app's home view is cropped
     from (Adam Jaime; credit in the footer).
-----------------------------------------------------*/
.vb-hero {
     position: relative;
     padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
     background:
          linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.55) 82%, var(--vb-black) 100%),
          linear-gradient(100deg, rgba(0, 0, 0, 0.82) 22%, rgba(0, 0, 0, 0.28) 58%, rgba(0, 0, 0, 0.05) 100%),
          url("assets/img/bar-hero.webp") 68% 42% / cover no-repeat;
}
.vb-hero__title {
     font-size: clamp(2.1rem, 4.6vw, 3.4rem);
     line-height: 1.16;
     margin-bottom: 1.4rem;
     text-wrap: balance;
     text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}
.vb-hero .vb-lead {
     text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}
.vb-hero .vb-phone {
     margin-inline: auto;
     max-width: 320px;
}

/*-----------------------------------------------------
     At-a-glance chips — frosted capsules, like the
     Suggest a Drink pill
-----------------------------------------------------*/
.vb-chips {
     display: flex;
     gap: 0.7rem;
     flex-wrap: wrap;
     list-style: none;
     margin: 1.6rem 0 0;
     padding: 0;
}
.vb-chip {
     font-size: 0.88rem;
     color: var(--vb-white);
     background: rgba(255, 255, 255, 0.12);
     border: 1px solid rgba(255, 255, 255, 0.24);
     -webkit-backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
     border-radius: 999px;
     padding: 0.4rem 1rem;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.vb-chip i {
     color: var(--vb-amber);
     margin-right: 0.35rem;
}

/*-----------------------------------------------------
     App Store badge
-----------------------------------------------------*/
.vb-badge {
     margin: 1.6rem 0 0;
}
.vb-badge__link {
     display: inline-block;
     transition: transform 0.12s ease;
}
.vb-badge__link:hover {
     transform: translateY(-2px);
}
.vb-badge__link img {
     height: 50px;
     width: auto;
     filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.vb-badge__note {
     display: block;
     margin-top: 0.6rem;
     font-size: 0.85rem;
     color: var(--vb-dim);
}

/*-----------------------------------------------------
     Phone frames
-----------------------------------------------------*/
.vb-phone {
     margin: 0 auto;
     max-width: 300px;
}
.vb-phone__frame {
     border-radius: clamp(2rem, 9vw, 2.6rem);
     border: 11px solid #17130d;
     outline: 1px solid rgba(241, 166, 50, 0.35);
     outline-offset: -1px;
     overflow: hidden;
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 6px 18px rgba(241, 166, 50, 0.1);
     background: #17130d;
}
.vb-phone__screen {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 1287 / 2796;
     object-fit: cover;
}
.vb-phone__caption {
     text-align: center;
     margin-top: 1rem;
     font-size: 0.9rem;
     color: var(--vb-dim);
}
.vb-feature .vb-phone {
     max-width: 290px;
}
.vb-feature--almost .vb-phone__frame {
     transform: rotate(-1.1deg);
}
.vb-feature--mybar .vb-phone__frame {
     transform: rotate(1.1deg);
}

/*-----------------------------------------------------
     The toast — four lines on the one sound every
     bar agrees about
-----------------------------------------------------*/
.vb-toast {
     padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 2vw, 1.5rem);
     text-align: center;
}
.vb-toast__verse {
     margin: 0 auto;
     max-width: 42ch;
}
.vb-toast__verse::before,
.vb-toast__verse::after {
     content: "";
     display: block;
     width: 3.2rem;
     height: 2px;
     margin: 0 auto;
     background: linear-gradient(90deg, transparent, var(--vb-brass), transparent);
}
.vb-toast__verse::before {
     margin-bottom: 1.6rem;
}
.vb-toast__verse::after {
     margin-top: 1.6rem;
}
.vb-toast__verse p {
     font-family: var(--vb-display);
     font-size: clamp(1.05rem, 2vw, 1.3rem);
     line-height: 2;
     color: var(--vb-cream);
     margin: 0;
}
.vb-toast__cite {
     display: block;
     margin-top: 0.9rem;
     font-family: var(--vb-sans);
     font-style: normal;
     font-size: 0.78rem;
     text-transform: uppercase;
     letter-spacing: 0.18em;
     color: var(--vb-faint);
}

/*-----------------------------------------------------
     How-the-house-works steps
-----------------------------------------------------*/
.vb-steps {
     padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}
.vb-step {
     background: var(--vb-coal);
     border: 1px solid var(--vb-hairline);
     border-radius: 1rem;
     padding: 2rem 1.6rem;
     height: 100%;
     box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.vb-step__icon {
     display: inline-grid;
     place-items: center;
     width: 64px;
     height: 64px;
     border-radius: 50%;
     font-size: 1.7rem;
     color: var(--vb-brass-ink);
     background: linear-gradient(135deg, var(--vb-brass) 0%, var(--vb-brass-mid) 45%, var(--vb-brass-hi) 70%, var(--vb-brass-mid) 100%);
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 210, 0.5);
     margin-bottom: 1.1rem;
}
.vb-step__title {
     font-size: 1.25rem;
     margin-bottom: 0.6rem;
}
.vb-step__copy {
     font-size: 0.95rem;
     color: var(--vb-dim);
     margin: 0;
}

/*-----------------------------------------------------
     The specials board — real drink names from the
     library, set in the app's own typeface
-----------------------------------------------------*/
.vb-marquee {
     padding: 1.2rem 0;
     border-top: 1px solid var(--vb-hairline);
     border-bottom: 1px solid var(--vb-hairline);
     overflow: hidden;
}
.vb-marquee__row {
     font-family: var(--vb-display);
     font-size: 1.05rem;
     color: var(--vb-cream);
     white-space: nowrap;
     text-align: center;
     -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
     mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.vb-marquee__row--dim {
     color: var(--vb-faint);
     font-size: 0.92rem;
     margin-top: 0.35rem;
}

/*-----------------------------------------------------
     Feature sections
-----------------------------------------------------*/
.vb-feature,
.vb-guestbook,
.vb-house {
     padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.vb-feature--almost {
     background:
          radial-gradient(ellipse 90% 70% at 70% 20%, rgba(241, 166, 50, 0.07), transparent 60%),
          linear-gradient(168deg, var(--vb-slate-deep) 0%, var(--vb-slate) 55%, #1b1f25 100%);
     border-top: 1px solid var(--vb-hairline);
     border-bottom: 1px solid var(--vb-hairline);
}
.vb-panel {
     background: rgba(0, 0, 0, 0.55);
     -webkit-backdrop-filter: blur(6px);
     backdrop-filter: blur(6px);
     border: 1px solid var(--vb-hairline);
     border-radius: 1rem;
     padding: clamp(1.4rem, 3vw, 2.2rem);
     box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.vb-panel > :last-child {
     margin-bottom: 0;
}

/*-----------------------------------------------------
     The "missing:" line — the app's own orange label,
     link-out box and all
-----------------------------------------------------*/
.vb-missing {
     font-size: 1.02rem;
     color: var(--vb-orange);
     margin: 1.3rem 0;
}
.vb-missing strong {
     color: var(--vb-orange);
     font-weight: 600;
}
.vb-missing__box {
     display: inline-grid;
     place-items: center;
     width: 1.35em;
     height: 1.35em;
     margin-left: 0.25em;
     border: 1.5px solid var(--vb-orange);
     border-radius: 0.3em;
     font-size: 0.72em;
     vertical-align: -0.2em;
}

/*-----------------------------------------------------
     The guest book — real five-star reviews
-----------------------------------------------------*/
.vb-guestbook__head {
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: 1.5rem;
     flex-wrap: wrap;
     margin-bottom: 2rem;
}
.vb-plaque {
     font-size: 0.95rem;
     color: var(--vb-brass-ink);
     background: linear-gradient(135deg, var(--vb-brass) 0%, var(--vb-brass-mid) 40%, var(--vb-brass-hi) 65%, var(--vb-brass-mid) 100%);
     border-radius: 0.5rem;
     padding: 0.55rem 1.1rem;
     margin: 0;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 210, 0.5), inset 0 -1px 0 rgba(42, 28, 8, 0.45);
     text-shadow: 0 1px 0 rgba(255, 240, 210, 0.35);
}
.vb-plaque i {
     margin-right: 0.3rem;
}
.vb-review {
     background: var(--vb-coal);
     border: 1px solid var(--vb-hairline);
     border-radius: 1rem;
     padding: 1.5rem 1.5rem 1.2rem;
     width: 100%;
     display: flex;
     flex-direction: column;
     box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.vb-review__stars {
     color: var(--vb-amber);
     font-size: 0.85rem;
     letter-spacing: 0.18em;
     margin-bottom: 0.7rem;
     text-shadow: 0 0 10px rgba(241, 166, 50, 0.4);
}
.vb-review__title {
     font-size: 1.15rem;
     margin-bottom: 0.6rem;
}
.vb-review__quote {
     font-size: 0.95rem;
     color: var(--vb-dim);
     margin: 0 0 1rem;
     flex-grow: 1;
}
.vb-review__quote::before {
     content: "\201C";
}
.vb-review__quote::after {
     content: "\201D";
}
.vb-review__byline {
     font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--vb-faint);
     margin: 0;
}
.vb-guestbook__note {
     margin-top: 1.6rem;
     text-align: center;
     font-size: 0.88rem;
     color: var(--vb-faint);
}

/*-----------------------------------------------------
     Recipe cards — the app's drink-detail panel,
     borrowed for house business
-----------------------------------------------------*/
.vb-recipe {
     background: #060708;
     border: 1px solid var(--vb-hairline);
     border-radius: 1.1rem;
     padding: 1.7rem 1.8rem 1.4rem;
     box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.vb-recipe__title {
     font-size: 1.7rem;
     margin-bottom: 0.1rem;
}
.vb-recipe__glass {
     font-size: 0.95rem;
     color: var(--vb-faint);
     margin-bottom: 1.2rem;
}
.vb-recipe__head {
     font-family: var(--vb-sans);
     font-weight: 700;
     font-size: 1rem;
     color: var(--vb-white);
     margin-bottom: 0.6rem;
}
.vb-recipe__list {
     list-style: none;
     margin: 0 0 1.3rem;
     padding: 0;
}
.vb-recipe__list li {
     padding: 0.32rem 0;
     line-height: 1.6;
     color: var(--vb-cream);
}
.vb-recipe__list i {
     color: var(--vb-green);
     margin-right: 0.6rem;
}
.vb-recipe__body {
     color: var(--vb-cream);
     margin-bottom: 0;
}
.vb-recipe__sign {
     text-align: right;
     color: var(--vb-faint);
     margin: 0.9rem 0 0;
     font-size: 0.9rem;
}

/*-----------------------------------------------------
     Founders band
-----------------------------------------------------*/
.vb-founders {
     padding: 0 0 clamp(2rem, 4vw, 3rem);
}
.vb-founders__band {
     display: flex;
     align-items: center;
     gap: 1.4rem;
     background: linear-gradient(100deg, rgba(241, 166, 50, 0.14), rgba(241, 166, 50, 0.03) 65%);
     border: 1px solid rgba(241, 166, 50, 0.3);
     border-radius: 1.2rem;
     padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3.5vw, 2.4rem);
}
.vb-founders__mark {
     flex: 0 0 auto;
     display: inline-grid;
     place-items: center;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     font-size: 1.6rem;
     color: var(--vb-brass-ink);
     background: linear-gradient(135deg, var(--vb-brass) 0%, var(--vb-brass-mid) 45%, var(--vb-brass-hi) 70%, var(--vb-brass-mid) 100%);
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 210, 0.5);
}
.vb-founders__title {
     font-size: 1.35rem;
     margin-bottom: 0.4rem;
}
.vb-founders__copy {
     color: var(--vb-dim);
     margin: 0;
     max-width: 68ch;
}

/*-----------------------------------------------------
     Closing CTA
-----------------------------------------------------*/
.vb-cta {
     padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.5rem, 8vw, 5.5rem);
     text-align: center;
}
.vb-cta__mark {
     border-radius: 22px;
     outline: 1px solid rgba(241, 166, 50, 0.4);
     outline-offset: -1px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 40px rgba(241, 166, 50, 0.15);
     margin-bottom: 1.4rem;
}
.vb-cta__title {
     font-size: clamp(1.7rem, 3.6vw, 2.5rem);
     margin-bottom: 0.4rem;
}
.vb-cta__sub {
     font-size: 1.15rem;
     color: var(--vb-dim);
}
.vb-cta .vb-badge {
     margin-top: 1.4rem;
}
.vb-cta__closer {
     font-family: var(--vb-display);
     margin-top: 2rem;
     font-size: 1.15rem;
     letter-spacing: 0.06em;
     color: var(--vb-amber);
}

/*-----------------------------------------------------
     Guide pages (Top Shelf, Support, Privacy)
-----------------------------------------------------*/
.vb-guide__hero {
     padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
     border-bottom: 1px solid var(--vb-hairline);
     margin-bottom: clamp(2rem, 4vw, 3rem);
     background:
          linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.88) 70%, var(--vb-black) 100%),
          url("assets/img/bar-hero.webp") 68% 30% / cover no-repeat;
}
.vb-guide__title {
     font-size: clamp(2rem, 4.4vw, 3rem);
     margin-bottom: 1rem;
}
.vb-guide__body {
     max-width: 76ch;
}
.vb-guide__section {
     margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
     scroll-margin-top: 6.5rem;
}
.vb-guide__section h2 {
     font-size: 1.6rem;
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
     border-bottom: 2px solid rgba(241, 166, 50, 0.45);
}
.vb-guide__section h3 {
     font-size: 1.15rem;
     margin: 1.6rem 0 0.6rem;
     color: var(--vb-amber-hi);
}
.vb-guide__section ul,
.vb-guide__section ol {
     padding-left: 1.3rem;
}
.vb-guide__section li {
     margin-bottom: 0.55rem;
}
.vb-guide__section li::marker {
     color: var(--vb-amber);
}
.vb-guide__closer {
     color: var(--vb-dim);
     font-style: italic;
}
.vb-guide__cta {
     text-align: center;
     border-top: 1px solid var(--vb-hairline);
     padding-top: 2rem;
     margin-top: 1rem;
}
.vb-guide__search {
     max-width: 30rem;
     margin-top: 1rem;
}

/*-----------------------------------------------------
     Blog — Bar Notes
-----------------------------------------------------*/
.vb-posts {
     max-width: 76ch;
}
.vb-note {
     background: var(--vb-coal);
     border: 1px solid var(--vb-hairline);
     border-radius: 0.8rem;
     padding: 1.6rem 1.8rem;
     margin-bottom: 1.6rem;
     box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.vb-note__date {
     font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 0.14em;
     color: var(--vb-faint);
     margin-bottom: 0.4rem;
}
.vb-note__title {
     font-size: 1.4rem;
     margin-bottom: 0.6rem;
}
.vb-note__title a {
     text-decoration: none;
     color: var(--vb-white);
}
.vb-note__title a:hover {
     color: var(--vb-amber-hi);
}
.vb-note__excerpt {
     color: var(--vb-dim);
}
.vb-note__more a {
     font-size: 0.95rem;
}
.vb-none {
     padding: 2rem 0 4rem;
}
.vb-prose {
     max-width: 72ch;
     margin-bottom: 3rem;
}
.vb-prose img {
     border-radius: 0.6rem;
     box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.navigation.pagination,
.navigation.post-navigation {
     margin: 2rem 0 3rem;
}
.navigation .nav-links {
     display: flex;
     gap: 0.8rem;
     flex-wrap: wrap;
}
.navigation .page-numbers {
     display: inline-block;
     padding: 0.3rem 0.85rem;
     background: var(--vb-chrome);
     border: 1px solid var(--vb-hairline);
     border-radius: 999px;
     text-decoration: none;
     color: var(--vb-cream);
}
.navigation .page-numbers.current {
     background: var(--vb-amber);
     border-color: var(--vb-amber);
     color: #241503;
}

/*-----------------------------------------------------
     Search form + comments — dark chrome, like the
     app's own search field
-----------------------------------------------------*/
.vb-searchform {
     display: flex;
     gap: 0.6rem;
     align-items: center;
}
.vb-searchform__field {
     flex: 1;
     font-family: var(--vb-sans);
     background: var(--vb-chrome);
     border: 1px solid var(--vb-hairline);
     border-radius: 999px;
     padding: 0.55rem 1.2rem;
     color: var(--vb-white);
}
.vb-searchform__field::placeholder {
     color: var(--vb-faint);
}
.vb-searchform__field:focus {
     outline: 3px solid var(--vb-amber);
     outline-offset: 1px;
}
.vb-comments {
     max-width: 72ch;
     margin: 3rem 0;
}
.vb-comments__title {
     font-size: 1.3rem;
     margin-bottom: 1.2rem;
}
.vb-comments__list {
     list-style: none;
     padding-left: 0;
}
.vb-comments .comment-body {
     background: var(--vb-coal);
     border: 1px solid var(--vb-hairline);
     border-radius: 0.8rem;
     padding: 1.1rem 1.3rem;
     margin-bottom: 1.1rem;
}
.vb-comments input[type="text"],
.vb-comments input[type="email"],
.vb-comments input[type="url"],
.vb-comments textarea {
     font-family: var(--vb-sans);
     background: var(--vb-chrome);
     border: 1px solid var(--vb-hairline);
     border-radius: 0.6rem;
     padding: 0.55rem 0.9rem;
     width: 100%;
     margin-bottom: 0.9rem;
     color: var(--vb-white);
}

/*-----------------------------------------------------
     404
-----------------------------------------------------*/
.vb-404 {
     padding: clamp(3rem, 8vw, 6rem) 0;
}
.vb-404__mark {
     border-radius: 26px;
     outline: 1px solid rgba(241, 166, 50, 0.4);
     outline-offset: -1px;
     box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7);
     margin-bottom: 1.6rem;
}
.vb-404__title {
     font-size: clamp(2rem, 4.5vw, 3rem);
     margin-bottom: 1rem;
}
.vb-404 .vb-lead {
     margin-inline: auto;
}
.vb-404__actions {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
     margin: 1.8rem 0;
}
.vb-404__search {
     max-width: 26rem;
     margin: 0 auto;
}

/*-----------------------------------------------------
     Footer — last light over the back bar
-----------------------------------------------------*/
.vb-footer {
     margin-top: clamp(2rem, 5vw, 4rem);
     background: linear-gradient(180deg, #060606 0%, #030303 100%);
     color: var(--vb-cream);
     border-top: 1px solid rgba(241, 166, 50, 0.35);
     box-shadow: inset 0 1px 0 rgba(241, 166, 50, 0.12), inset 0 30px 60px -40px rgba(241, 166, 50, 0.12);
     padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
}
.vb-footer a {
     color: var(--vb-cream);
     text-decoration-color: rgba(241, 166, 50, 0.5);
}
.vb-footer a:hover {
     color: var(--vb-white);
     text-decoration-color: var(--vb-amber);
}
.vb-footer__grid {
     display: grid;
     grid-template-columns: 1.4fr 1fr 1.4fr;
     gap: 2.5rem;
}
.vb-footer__mark {
     border-radius: 16px;
     outline: 1px solid rgba(241, 166, 50, 0.35);
     outline-offset: -1px;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
     margin-bottom: 1rem;
}
.vb-footer__name {
     font-family: var(--vb-display);
     font-size: 1.15rem;
     color: var(--vb-white);
     margin-bottom: 0.4rem;
}
.vb-footer__line {
     color: var(--vb-dim);
     font-size: 0.9rem;
}
.vb-footer__heading {
     text-transform: uppercase;
     letter-spacing: 0.2em;
     font-size: 0.75rem;
     font-weight: 600;
     color: var(--vb-amber);
     margin-bottom: 0.9rem;
}
.vb-footer__nav {
     list-style: none;
     margin: 0;
     padding: 0;
}
.vb-footer__nav .vb-nav__link {
     color: var(--vb-cream);
     display: inline-block;
     padding: 0.15rem 0;
}
.vb-footer__fine {
     font-size: 0.8rem;
     color: var(--vb-faint);
     margin-bottom: 0.6rem;
}
.vb-footer .vb-badge {
     margin-top: 0.6rem;
}
.vb-footer .vb-badge__link img {
     height: 44px;
}
@media (max-width: 767px) {
     .vb-footer__grid {
          grid-template-columns: 1fr;
          gap: 1.8rem;
     }
}

/*-----------------------------------------------------
     Motion respect
-----------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
     .vb-btn,
     .vb-badge__link {
          transition: none;
     }
     .vb-btn--amber:hover,
     .vb-btn--glass:hover,
     .vb-badge__link:hover {
          transform: none;
     }
}

/*-----------------------------------------------------
     Small screens
-----------------------------------------------------*/
@media (max-width: 767px) {
     .vb-masthead {
          position: static;
     }
     .vb-hero {
          background-position: 62% 30%;
     }
     .vb-founders__band {
          flex-direction: column;
          text-align: center;
     }
}
@media (max-width: 575px) {
     .vb-masthead__row {
          justify-content: center;
          text-align: center;
     }
     .vb-phone {
          max-width: 250px;
     }
     .vb-guestbook__head {
          flex-direction: column;
          align-items: flex-start;
     }
}