/* ═══════════════════════════════════════════════════════════════════════════
   Friends, Tastings, Reviews, Wishlist (2026-10) — the "more room" layer (site.css) for the
   social pages, plus their visitor teaser (Components/VbTeaser) and the invite page (/join).
   Loaded after site.css. Tokens from base.css; see DESIGN.md §3b.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared ── */
.vb-social-head {
    padding-top: 4.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
}
.vb-social-head > div:first-child { flex: 1 1 18rem; min-width: 0; }
.vb-social-tools { display: flex; gap: 0.75rem; align-items: center; flex-wrap: nowrap; }
.vb-social-tools .vb-search--compact { flex: 0 1 22rem; min-width: 14rem; min-height: 3.25rem; }
.vb-social-tools > .vb-btn { flex: none; }
.vb-social-section { margin-top: 5.5rem; }
.vb-social-section--first { margin-top: 4rem; }
.vb-social-h2 { margin: 0; font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; color: var(--color-ink); }
.vb-social-meta { font-size: 0.875rem; color: var(--color-muted); }
.vb-social-state { margin: 0; padding: 1.75rem 0; color: var(--color-body); }
.vb-social-more { margin-top: 1.5rem; }
.vb-social-toast { margin: 2rem 0 0; padding: 0.875rem 1.25rem; border-radius: 14px; background: var(--color-stone); color: var(--color-ink); }
.vb-sub--tight { margin-top: 0.5rem; font-size: 0.9375rem; }
.vb-actions--center { justify-content: center; }
.vb-row-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.vb-social .vb-section-head--ruled { align-items: flex-end; }

/* A person: initials on a soft colour of their own (SocialText.Tint). */
.vb-face {
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-brand);
}
.vb-face--sm { width: 2rem; height: 2rem; font-size: 0.8125rem; }
.vb-face--md { width: 3rem; height: 3rem; }
.vb-face--lg { width: 4rem; height: 4rem; font-size: 1.375rem; }
.vb-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-line);
}
.vb-person-who { display: flex; align-items: center; gap: 1.125rem; min-width: 0; color: var(--color-ink); text-decoration: none; }
.vb-person-who:hover { color: var(--color-ink); text-decoration: none; }
.vb-person-who:hover b { text-decoration: underline; }
.vb-person-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.vb-person-text b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.vb-person-text span { font-size: 0.875rem; color: var(--color-muted); }

/* A score ring (0–4) in the wine's colour, with its word. */
.vb-score { display: inline-flex; align-items: center; gap: 0.625rem; }
.vb-score-ring {
    width: 2.875rem;
    height: 2.875rem;
    flex: none;
    border-radius: 999px;
    border: 2px solid var(--ring, var(--color-wine));
    background: var(--color-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}
.vb-score-ring--lg { width: 3.125rem; height: 3.125rem; font-size: 1.0625rem; }
.vb-score-word { font-size: 0.875rem; color: var(--color-body); }

/* ── Friends ── */
.vb-requests { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; max-width: 50rem; }
.vb-request {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-plinth);
}
.vb-fr-row {
    display: grid;
    grid-template-columns: 18.75rem minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: center;
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--color-line);
}
.vb-fr-row--sk { grid-template-columns: 4rem minmax(0, 24rem); gap: 1.25rem; padding: 1.5rem 0; }
.vb-fr-sk-avatar { width: 4rem; height: 4rem; border-radius: 999px; }
.vb-fr-name { font-size: 1.375rem !important; letter-spacing: -0.015em; }
.vb-fr-body { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.vb-fr-facts { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--color-ink); }
.vb-fr-facts b { font-weight: 600; }
.vb-fr-facts span { color: var(--color-body); }
.vb-fr-more { margin: 0; font-size: 0.9375rem; color: var(--color-body); }
.vb-fr-strip { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.vb-fr-bottle {
    width: 5.75rem;
    height: 7.25rem;
    border-radius: 14px;
    background: var(--color-stone);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.vb-fr-bottle:hover { transform: translateY(-3px); }
.vb-fr-svg { height: 86%; width: auto; display: block; }
.vb-fr-strip-note { font-size: 0.875rem; color: var(--color-muted); padding-left: 0.25rem; }
.vb-fr-open { white-space: nowrap; }

.vb-feed { list-style: none; margin: 0; padding: 0; }
.vb-feed-item {
    display: grid;
    grid-template-columns: 3rem 4rem minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-line);
}
.vb-feed-bottle {
    width: 4rem;
    height: 5rem;
    border-radius: 12px;
    background: var(--color-stone);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vb-feed-svg { height: 86%; width: auto; display: block; }
.vb-feed-text { min-width: 0; }
.vb-feed-text p { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--color-ink); }
.vb-feed-text p a { font-weight: 600; color: var(--color-ink); }
.vb-feed-text span { display: block; margin-top: 0.375rem; font-size: 0.875rem; color: var(--color-muted); }

.vb-invite {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3.5rem;
    padding: 3.5rem;
    border-radius: var(--radius-sheet);
    background: var(--color-stone);
}
.vb-invite .vb-actions { margin-top: 1.75rem; }
.vb-invite .vb-search { background: var(--color-card-bg); }
.vb-invite-link { margin: 1rem 0 0; font-size: 0.875rem; color: var(--color-muted); word-break: break-all; }
.vb-invite-sub { margin: 0.625rem 0 1.25rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-body); }
.vb-invite-sub b { color: var(--color-ink); font-weight: 600; }

/* ── Tastings ── */
.vb-ts-kicker { margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--color-wine); }
.vb-ts-hero {
    display: grid;
    grid-template-columns: 8.25rem minmax(0, 1fr);
    gap: 3rem;
    padding: 3rem;
    border-radius: var(--radius-sheet);
    background: var(--color-stone);
}
.vb-ts-hero-sk { height: 22rem; border-radius: var(--radius-sheet); }
.vb-ts-date { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.vb-ts-date span { font-size: 0.9375rem; color: var(--color-body); }
.vb-ts-date b { font-size: 4.5rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--color-ink); }
.vb-ts-date .vb-ts-date-month { font-size: 1.0625rem; font-weight: 600; color: var(--color-ink); }
.vb-ts-body { min-width: 0; }
.vb-ts-title { margin: 0; font-size: 2.125rem; line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; }
.vb-ts-title a { color: var(--color-ink); }
.vb-ts-meta { margin: 0.625rem 0 0; font-size: 1rem; color: var(--color-body); }
.vb-ts-people { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; }
.vb-ts-person {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0 1rem 0 0.375rem;
    border-radius: 999px;
    background: var(--color-card-bg);
    font-size: 0.9375rem;
    color: var(--color-ink);
}
.vb-ts-yes { color: var(--color-ok); }
.vb-ts-maybe { color: var(--color-muted); }
.vb-ts-bottles { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 2.25rem; }
.vb-ts-bottle { width: 10.5rem; display: flex; flex-direction: column; color: var(--color-ink); text-decoration: none; }
.vb-ts-bottle:hover { color: var(--color-ink); text-decoration: none; }
.vb-ts-plinth {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-plinth);
    background: var(--color-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vb-ts-svg { height: 82%; width: auto; display: block; }
.vb-ts-bottle-producer { padding-top: 0.875rem; font-size: 0.875rem; color: var(--color-muted); }
.vb-ts-bottle-name { padding-top: 0.25rem; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.vb-ts-plinth + .vb-ts-bottle-name { padding-top: 0.875rem; }
.vb-ts-bottle-meta { padding-top: 0.25rem; font-size: 0.875rem; color: var(--color-muted); }
.vb-ts-actions { margin-top: 2.5rem; align-items: center; }
.vb-ts-hint { font-size: 0.875rem; line-height: 1.5; color: var(--color-body); max-width: 24rem; margin-left: 0.5rem; }

.vb-ts-row {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) 19.5rem 9rem 1.5rem;
    gap: 2rem;
    align-items: center;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink);
    text-decoration: none;
}
.vb-ts-row:hover { color: var(--color-ink); text-decoration: none; }
.vb-ts-row:hover .vb-ts-row-text b { text-decoration: underline; }
.vb-ts-day { display: flex; flex-direction: column; gap: 0.125rem; }
.vb-ts-day b { font-size: 2.125rem; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.vb-ts-day span { font-size: 0.875rem; color: var(--color-body); }
.vb-ts-row-text { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.vb-ts-row-text b { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.vb-ts-row-text a { color: var(--color-ink); }
.vb-ts-row-text span { font-size: 0.9375rem; color: var(--color-muted); }
.vb-ts-thumbs { display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
.vb-ts-thumb {
    width: 3rem;
    height: 3.75rem;
    flex: none;
    border-radius: 10px;
    background: var(--color-stone);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vb-ts-thumb-svg { height: 84%; width: auto; display: block; }
.vb-ts-thumbs-note { font-size: 0.875rem; color: var(--color-muted); white-space: nowrap; }
.vb-ts-pill {
    justify-self: start;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: var(--color-stone);
    color: var(--color-body);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.vb-ts-pill.is-done { background: var(--color-ok-soft); color: var(--color-ok); }
.vb-ts-pill.is-next { background: var(--color-wine-soft); color: var(--color-wine); }
.vb-ts-pill.is-off { color: var(--color-muted); }
.vb-ts-chev { font-size: 1.25rem; color: var(--color-muted); }
.vb-ts-invite {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    margin-top: 1.25rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-plinth);
}
.vb-ts-empty {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 2rem 2.25rem;
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-plinth);
}
.vb-ts-empty b { font-size: 1.125rem; font-weight: 600; }
.vb-ts-empty p { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-body); max-width: 40rem; }
.vb-ts-picks { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.vb-ts-pick { display: flex; gap: 0.75rem; align-items: center; font-size: 0.9375rem; color: var(--color-ink); cursor: pointer; }
.vb-ts-pick input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-brand); flex: none; }

/* ── Reviews ── */
.vb-rv-compare { display: flex; flex-direction: column; gap: 0.625rem; align-items: flex-end; }
.vb-rv-compare .vb-chips { margin: 0; }
.vb-rv-statements {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--color-line);
}
.vb-rv-statements p { margin: 1.125rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--color-body); }
.vb-rv-statements strong, .vb-rv-statements a { color: var(--color-ink); font-weight: 600; }
.vb-rv-big { display: block; font-size: 3.5rem; line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: var(--color-ink); }
.vb-rv-big--word { font-size: 2.75rem; overflow-wrap: anywhere; }
.vb-rv-sk-big { height: 3.5rem; width: 40%; margin-bottom: 1rem; }
.vb-rv-two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 5rem; }
.vb-rv-two .vb-sub { margin-top: 0.625rem; }
.vb-rv-bars { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 1.625rem; }
.vb-rv-bar-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; margin-bottom: 0.625rem; }
.vb-rv-bar-head span { color: var(--color-body); font-variant-numeric: tabular-nums; }
.vb-rv-track { position: relative; height: 0.75rem; border-radius: 999px; background: var(--color-stone); }
.vb-rv-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--color-brand); }
.vb-rv-mark { position: absolute; top: -5px; width: 3px; height: 22px; margin-left: -1px; border-radius: 2px; background: var(--color-compare); }
.vb-rv-legend { margin: 0; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; font-size: 0.875rem; color: var(--color-muted); }
.vb-rv-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.vb-rv-key { display: inline-block; width: 1.125rem; height: 0.5rem; border-radius: 999px; background: var(--color-brand); }
.vb-rv-key--mark { width: 3px; height: 0.875rem; border-radius: 2px; background: var(--color-compare); }
.vb-rv-notes { margin-top: 2rem; }
.vb-rv-region {
    display: grid;
    grid-template-columns: 16.25rem minmax(0, 1fr) 4.5rem;
    gap: 2rem;
    align-items: center;
    padding: 1.375rem 0;
    border-bottom: 1px solid var(--color-line);
}
.vb-rv-region-name { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.vb-rv-region-name b { font-size: 1.0625rem; font-weight: 600; }
.vb-rv-region-name span { font-size: 0.875rem; color: var(--color-muted); }
.vb-rv-axis { position: relative; height: 1.5rem; }
.vb-rv-axis::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--color-line); }
.vb-rv-dot {
    position: absolute;
    top: 3px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 999px;
    border: 2px solid var(--color-card-bg);
    box-shadow: 0 0 0 1px rgba(28, 36, 32, 0.15);
}
.vb-rv-dot--them { top: 5px; width: 14px; height: 14px; margin-left: -7px; background: var(--color-card-bg); border-color: var(--color-compare); box-shadow: none; }
.vb-rv-region-avg { text-align: right; font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vb-rv-listhead { flex-wrap: wrap; gap: 1rem; }
.vb-rv-row { border-bottom: 1px solid var(--color-line); }
.vb-rv-row-head {
    width: 100%;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) 13rem 8.5rem 11rem;
    gap: 1.75rem;
    align-items: center;
    padding: 1.5rem 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--color-ink);
    cursor: pointer;
}
.vb-rv-row-head:hover b { text-decoration: underline; }
.vb-rv-thumb {
    width: 4rem;
    height: 5.25rem;
    border-radius: 12px;
    background: var(--color-stone);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vb-rv-svg { height: 86%; width: auto; display: block; }
.vb-rv-wine { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.vb-rv-wine b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.vb-rv-producer, .vb-rv-meta { font-size: 0.875rem; color: var(--color-muted); }
.vb-rv-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.vb-rv-tags span { padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--color-stone); font-size: 0.8125rem; }
.vb-rv-friend { font-size: 0.875rem; color: var(--color-body); font-variant-numeric: tabular-nums; }
.vb-rv-row-head .vb-score { justify-content: flex-end; }
.vb-rv-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem;
    padding: 0 0 2rem 6.25rem;
}
.vb-rv-open-bars { display: flex; flex-direction: column; gap: 0.875rem; }
.vb-rv-mini { display: grid; grid-template-columns: 6.875rem minmax(0, 1fr) 2.5rem; gap: 0.875rem; align-items: center; font-size: 0.875rem; }
.vb-rv-mini span:first-child { color: var(--color-body); }
.vb-rv-mini-track { height: 0.5rem; border-radius: 999px; background: var(--color-stone); overflow: hidden; }
.vb-rv-mini-track i { display: block; height: 100%; border-radius: 999px; }
.vb-rv-mini b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.vb-rv-note { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--color-ink); }
.vb-rv-them { align-self: start; padding: 1.25rem 1.5rem; border-radius: 16px; background: var(--color-stone); }
.vb-rv-them p { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--color-ink); }

/* ── Wishlist ── */
.vb-wl-now {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    margin-top: 2.25rem;
    padding: 2.5rem;
    border-radius: var(--radius-sheet);
    background: var(--color-stone);
}
.vb-wl-now-plinth {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-plinth);
    background: var(--color-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vb-wl-producer { margin: 0; font-size: 0.9375rem; color: var(--color-muted); }
.vb-wl-name { margin: 0.5rem 0 0; font-size: 2.125rem; line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; }
.vb-wl-name a { color: var(--color-ink); }
.vb-wl-meta { margin: 0.625rem 0 0; font-size: 1rem; color: var(--color-body); }
.vb-wl-ways { margin-top: 2rem; max-width: 40rem; }
.vb-wl-way {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--color-field);
}
.vb-wl-way > span { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.vb-wl-way b { font-size: 1.0625rem; font-weight: 600; }
.vb-wl-way > span > span { font-size: 0.9375rem; color: var(--color-body); }
.vb-wl-card .vb-cwine-drink { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.vb-wl-card .vb-cwine-drink:hover { color: var(--color-light-text); text-decoration: none; }
.vb-wl-card .vb-wine-note { color: var(--color-muted); font-weight: 400; }
.vb-cwine-pill {
    min-height: 2.25rem;
    padding: 0 0.875rem;
    border-radius: 999px;
    border: 0;
    background: var(--color-stone);
    color: var(--color-ink);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}
.vb-cwine-pill:hover { background: var(--color-line); }
.vb-wl-touch { display: none; }
@media (hover: none) {
    .vb-wl-touch { display: flex; gap: 1.25rem; margin-top: 0.25rem; }
    .vb-wl-touch a, .vb-wl-touch button {
        padding: 0.5rem 0;
        border: 0;
        background: none;
        font: inherit;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-brand);
    }
}

/* ── Visitor teaser (Components/VbTeaser) ── */
.vb-teaser {
    padding-top: 5.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4.5rem;
    align-items: center;
}
.vb-teaser .vb-kicker { margin-bottom: 1rem; }
.vb-teaser .vb-actions { margin-top: 2.5rem; }
.vb-teaser-points { list-style: none; margin: 2.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.375rem; }
.vb-teaser-points li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.vb-teaser-points b { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--color-ink); }
.vb-teaser-points li > span > span { display: block; margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.55; color: var(--color-body); }
.vb-teaser-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: var(--color-stone);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vb-teaser-note { margin: 1.125rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--color-muted); max-width: 30rem; }
.vb-teaser-note a { font-weight: 600; color: var(--color-brand); }
.vb-teaser-pic {
    position: relative;
    min-height: 22rem;
    padding: 2.25rem;
    border-radius: var(--radius-sheet);
    background: var(--color-stone);
    overflow: hidden;
}
.vb-teaser-pic::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8.75rem;
    background: linear-gradient(to bottom, rgba(242, 243, 241, 0), var(--color-stone));
    pointer-events: none;
}
.vb-teaser-row {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 1.375rem 0;
    border-bottom: 1px solid var(--color-field);
}
.vb-teaser-row .vb-teaser-bottles { grid-column: 2; }
.vb-teaser-dot { width: 3.25rem; height: 3.25rem; border-radius: 999px; display: block; }
.vb-teaser-dot--small { width: 2.25rem; height: 2.25rem; }
.vb-teaser-bars { display: flex; flex-direction: column; gap: 0.625rem; }
.vb-teaser-bars i { display: block; height: 0.75rem; border-radius: 999px; background: var(--color-field); }
.vb-teaser-bars i + i { width: 60%; height: 0.625rem; background: var(--color-line); }
.vb-teaser-bottles { display: flex; gap: 0.625rem; }
.vb-teaser-bottles--big { gap: 1rem; margin-top: 1.75rem; }
.vb-teaser-plinth {
    width: 4.75rem;
    height: 6rem;
    border-radius: 12px;
    background: var(--color-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vb-teaser-plinth .vb-drawn { height: 78%; }
.vb-teaser-bottles--big .vb-teaser-plinth { width: 7.5rem; height: 9.5rem; }
.vb-teaser-date { display: flex; flex-direction: column; gap: 0.25rem; }
.vb-teaser-date span { font-size: 0.9375rem; color: var(--color-body); }
.vb-teaser-date b { font-size: 4rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--color-ink); }
.vb-teaser-people { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.vb-teaser-row--review { grid-template-columns: 3.25rem minmax(0, 1fr); }
.vb-teaser-ring {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    border: 2px solid var(--color-wine);
    background: var(--color-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink);
}
.vb-teaser-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vb-teaser-plinth--card { width: auto; height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-plinth); }
.vb-teaser-more { margin-top: 6.5rem; padding-bottom: 2rem; }
.vb-teaser-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin-top: 1.75rem; }
.vb-teaser-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 2rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sheet);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.vb-teaser-card:hover { border-color: var(--color-brand); color: var(--color-ink); text-decoration: none; }
.vb-teaser-card-kicker { font-size: 0.875rem; color: var(--color-muted); }
.vb-teaser-card b { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
.vb-teaser-card > span:last-child { font-size: 0.9375rem; line-height: 1.6; color: var(--color-body); }

/* ── Invite page (/join) ── */
.vb-join-hero { padding-top: 6rem; max-width: 52rem; }
.vb-join-hero .vb-kicker { margin-bottom: 1rem; }
.vb-join-done { margin: 2rem 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--color-ok); }
.vb-join-note { margin: 1.25rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-body); }
.vb-join-note a { font-weight: 600; color: var(--color-brand); }
.vb-join-points {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-line);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
}
.vb-join-points p { margin: 0.625rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--color-body); }
.vb-join-app { margin-top: 4rem; padding-bottom: 5rem; display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.vb-join-app p { margin: 0; color: var(--color-body); }

/* ── Smaller screens ── */
@media (max-width: 900px) {
    .vb-social-head { padding-top: 3rem; }
    .vb-social-tools { width: 100%; flex-wrap: wrap; }
    .vb-social-tools .vb-search--compact { flex: 1 1 100%; min-width: 0; }
    .vb-social-section { margin-top: 4rem; }
    .vb-fr-row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .vb-fr-open { justify-self: start; }
    .vb-invite { grid-template-columns: minmax(0, 1fr); padding: 2rem; gap: 2.5rem; }
    .vb-ts-hero { grid-template-columns: minmax(0, 1fr); padding: 2rem; gap: 1.5rem; }
    .vb-ts-date { flex-direction: row; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; }
    .vb-ts-date b { font-size: 2.5rem; }
    .vb-ts-bottle { width: calc(50% - 0.625rem); }
    .vb-ts-hint { margin-left: 0; }
    .vb-ts-row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1.25rem; }
    .vb-ts-thumbs, .vb-ts-chev { display: none; }
    .vb-ts-invite { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .vb-ts-invite .vb-row-btns { grid-column: 1 / -1; }
    .vb-rv-compare { align-items: flex-start; }
    .vb-rv-statements { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-bottom: 3rem; }
    .vb-rv-two { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
    .vb-rv-region { grid-template-columns: minmax(0, 1fr) 3.5rem; gap: 0.75rem 1rem; }
    .vb-rv-axis { grid-column: 1 / -1; grid-row: 2; }
    .vb-rv-row-head { grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1rem; }
    .vb-rv-thumb { width: 3.5rem; height: 4.5rem; }
    .vb-rv-tags, .vb-rv-friend, .vb-rv-row-head .vb-score-word { display: none; }
    .vb-rv-open { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
    .vb-wl-now { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; gap: 1.5rem; }
    .vb-wl-now-plinth { max-width: 14rem; }
    .vb-wl-name { font-size: 1.75rem; }
    .vb-wl-way { flex-wrap: wrap; }
    .vb-teaser { grid-template-columns: minmax(0, 1fr); padding-top: 3rem; gap: 3rem; }
    .vb-teaser-cards { grid-template-columns: minmax(0, 1fr); }
    .vb-join-hero { padding-top: 3.5rem; }
    .vb-join-points { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 640px) {
    .vb-teaser-pic { min-height: 0; max-height: 19rem; padding: 1.5rem; }
    .vb-feed-item { grid-template-columns: 3rem minmax(0, 1fr); }
    .vb-feed-bottle { display: none; }
    .vb-feed-item .vb-score { grid-column: 2; }
    .vb-person { flex-wrap: wrap; }
    .vb-fr-bottle { width: 4.5rem; height: 5.75rem; }
}

/* ── One tasting (/tastings/{id}, Pages/TastingDetails) ── */
.vb-tp-back { padding-top: 2.5rem; }
.vb-tp-backlink { font-size: 0.9375rem; font-weight: 600; color: var(--color-brand); }
.vb-tp-head {
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 8.25rem minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.vb-tp-titles .vb-ts-pill { display: inline-block; margin-bottom: 1rem; }
.vb-tp-titles .vb-h1 { margin: 0; }
.vb-tp-titles .vb-sub { margin-top: 1rem; }
.vb-tp-rsvp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.75rem 2rem;
    border-radius: var(--radius-sheet);
    background: var(--color-stone);
}
.vb-tp-rsvp b { font-size: 1.125rem; font-weight: 600; color: var(--color-ink); }
.vb-tp-rsvp p { margin: 0.375rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-body); max-width: 40rem; }
.vb-tp-actions { margin-top: 2.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.vb-tp-print { display: inline-flex; gap: 1.25rem; margin-left: 0.75rem; }
.vb-tp-grid { margin-top: 2rem; }
.vb-tp-from { font-size: 0.8125rem; color: var(--color-muted); }
.vb-tp-invite { margin-top: 2rem; padding: 1.75rem 2rem 0.5rem; border: 1px solid var(--color-line); border-radius: var(--radius-sheet); }
.vb-tp-invite .vb-person:last-child { border-bottom: 0; }
.vb-tp-result {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) 8rem 12rem;
    gap: 1.5rem;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-line);
}
.vb-tp-result .vb-rv-wine { color: var(--color-ink); text-decoration: none; }
.vb-tp-result .vb-score { justify-content: flex-end; }
.vb-tp-result-you { font-size: 0.875rem; color: var(--color-body); font-variant-numeric: tabular-nums; }
.vb-tp-result-none { text-align: right; }
.vb-tp-foot { margin: 1.25rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--color-muted); max-width: 44rem; }
.vb-tp-sheet { max-width: 36rem; }
.vb-tp-pick-search { margin-top: 1.5rem; }
.vb-tp-picklist { margin-top: 1.25rem; max-height: 22rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; padding-right: 0.25rem; }
@media (max-width: 900px) {
    .vb-tp-head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .vb-tp-head .vb-ts-date { flex-direction: row; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; }
    .vb-tp-head .vb-ts-date b { font-size: 2.5rem; }
    .vb-tp-rsvp { padding: 1.5rem; }
    .vb-tp-print { margin-left: 0; width: 100%; }
    .vb-tp-result { grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1rem; }
    .vb-tp-result-you { display: none; }
    .vb-tp-result .vb-score-word { display: none; }
}