/* ============================================================
   Victoria Baker Core — portfolio styles (Bricks Builder)
   Derived from the approved HTML prototype. Screensilk · 2026

   NOTE: Bricks sets html { font-size: 62.5% } (1rem = 10px), so every
   rem value in this file is the prototype value × 1.6. If you copy
   styles from the prototype stylesheet, multiply rem values by 1.6.
   ============================================================ */

:root {
  --ink:      #15120F;   /* near-black, warm */
  --coal:     #1C1815;   /* section dark */
  --coal-2:   #241F1B;   /* raised dark */
  --bone:     #EFE9DF;   /* light background */
  --paper:    #F5F1E9;   /* lighter card */
  --oxblood:  #7C2F28;   /* accent */
  --brass:    #A9895A;   /* metallic accent */
  --brass-lt: #C4A97D;
  --smoke:    rgba(21, 18, 15, .55);
  --line-d:   rgba(239, 233, 223, .16);
  --line-l:   rgba(21, 18, 15, .16);

  --font-display: "Fraunces", "Georgia", serif;
  --font-sans: "Archivo", "Helvetica Neue", sans-serif;

  --w-max: 1360px;
  --pad: clamp(2rem, 4vw, 4.8rem);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .7s;
}

/* Scoped reset — never touch elements outside the portfolio roots */
:is(.vb-hero, .vb-ribbon, .vb-section-light, .vb-section-dark,
    .vb-site-header, .vb-mobile-menu, .vb-site-footer, .vb-lightbox) *,
:is(.vb-hero, .vb-ribbon, .vb-section-light, .vb-section-dark,
    .vb-site-header, .vb-mobile-menu, .vb-site-footer, .vb-lightbox) *::before,
:is(.vb-hero, .vb-ribbon, .vb-section-light, .vb-section-dark,
    .vb-site-header, .vb-mobile-menu, .vb-site-footer, .vb-lightbox) *::after {
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

/* Base type scoped to the portfolio's own roots — never the whole site */
.vb-hero, .vb-ribbon, .vb-section-light, .vb-section-dark,
.vb-site-header, .vb-mobile-menu, .vb-site-footer, .vb-lightbox {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.vb-section-light { color: var(--ink); }

.vb-hero img, .vb-section-light img, .vb-section-dark img { display: block; max-width: 100%; height: auto; }
.vb-hero a, .vb-section-light a, .vb-section-dark a,
.vb-site-header a, .vb-mobile-menu a, .vb-site-footer a { color: inherit; text-decoration: none; }
.vb-filter-btn, .vb-lightbox button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

.vb-container,
.brxe-container.vb-container {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

::selection { background: var(--oxblood); color: var(--bone); }

/* ---------- typography helpers ---------- */

.vb-eyebrow {
  font-family: var(--font-sans);
  font-size: 1.152rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}
.vb-eyebrow::before {
  content: "";
  width: 4.16rem;
  height: 1px;
  background: currentColor;
  opacity: .7;
}
.vb-eyebrow-dark { color: var(--brass-lt); }

.vb-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.68rem, 4.6vw, 6.24rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.vb-section-title em {
  font-weight: 300;
  color: var(--oxblood);
}
.vb-section-dark .vb-section-title em { color: var(--brass-lt); }

.vb-section-sub {
  max-width: 54.4rem;
  margin-top: 2.24rem;
  color: rgba(21, 18, 15, .72);
}

/* ---------- buttons ---------- */

.vb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.96rem;
  padding: 1.6rem 3.52rem;
  font-size: 1.248rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  overflow: hidden;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out), background-color .45s var(--ease-out);
}
.vb-btn::after {                 /* sweep fill */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
  z-index: -1;
}
.vb-btn:hover::after { transform: scaleX(1); }

.vb-btn-solid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.vb-btn-solid:hover { color: var(--ink); border-color: var(--brass); }
.vb-btn-ghost { border-color: var(--line-d); color: var(--bone); }
.vb-btn-ghost:hover { border-color: var(--brass); color: var(--ink); }
.vb-btn-outline { border-color: var(--line-d); color: var(--bone); padding: 1.12rem 2.56rem; }
.vb-btn-outline:hover { border-color: var(--brass); color: var(--ink); }

.vb-inline-link {
  position: relative;
  color: var(--oxblood);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease-out);
}
.vb-inline-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.vb-inline-link-dark { color: var(--brass-lt); }

/* ---------- header ---------- */

.vb-site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .5s var(--ease-out), backdrop-filter .5s, box-shadow .5s;
}
.vb-header-inner {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: 2.24rem var(--pad);
  display: flex;
  align-items: center;
  gap: 4rem;
  transition: padding .5s var(--ease-out);
}
.vb-site-header.is-scrolled {
  background: rgba(21, 18, 15, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-d);
}
.vb-site-header.is-scrolled .vb-header-inner { padding-block: 1.36rem; }

.vb-logo { display: flex; flex-direction: column; line-height: 1.1; color: var(--bone); }
.vb-logo-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.048rem;
  letter-spacing: .04em;
}
.vb-logo-sub {
  font-size: 0.992rem;
  font-weight: 500;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--brass-lt);
  margin-top: 0.32rem;
}

.vb-site-nav { margin-left: auto; }
.vb-site-nav ul { display: flex; gap: 3.84rem; list-style: none; }
.vb-nav-link {
  position: relative;
  font-size: 1.248rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 0.64rem 0;
}
.vb-nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass-lt);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.vb-nav-link:hover::after,
.vb-nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }

.vb-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 7px;
  padding: 0.8rem;
  margin-left: auto;
}
.vb-nav-toggle span {
  width: 26px; height: 1.5px;
  background: var(--bone);
  transition: transform .4s var(--ease-out), opacity .3s;
}
.vb-nav-toggle.is-open span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.vb-nav-toggle.is-open span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

.vb-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--coal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.vb-mobile-menu.is-open { opacity: 1; visibility: visible; }
.vb-mobile-menu nav { display: flex; flex-direction: column; gap: 1.6rem; text-align: center; }
.vb-mobile-link {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 4.8rem);
  color: var(--bone);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.vb-mobile-menu.is-open .vb-mobile-link { opacity: 1; transform: none; }
.vb-mobile-menu.is-open .vb-mobile-link:nth-child(2) { transition-delay: .06s; }
.vb-mobile-menu.is-open .vb-mobile-link:nth-child(3) { transition-delay: .12s; }
.vb-mobile-menu.is-open .vb-mobile-link:nth-child(4) { transition-delay: .18s; }
.vb-mobile-link:hover { color: var(--brass-lt); }

/* ---------- hero ---------- */

.vb-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
}
.vb-hero-bg { position: absolute; inset: -8% 0; will-change: transform; }
.vb-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% center;
  animation: heroZoom 14s var(--ease-out) both;
}
@keyframes heroZoom {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}
.vb-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(21,18,15,.88) 0%, rgba(21,18,15,.28) 45%, rgba(21,18,15,.42) 100%),
    linear-gradient(100deg, rgba(21,18,15,.72) 12%, transparent 55%);
}
.vb-hero-content {
  position: relative;
  width: 100%;
  padding-bottom: clamp(8rem, 12vh, 14.4rem);
  padding-top: 14.4rem;
}
.vb-hero-eyebrow { color: var(--brass-lt); }

.vb-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(5.44rem, 9.5vw, 13.12rem);
  line-height: .98;
  letter-spacing: -.015em;
  margin: 0 0 2.56rem;
}
.vb-hero-title em { color: var(--brass-lt); font-weight: 300; }
.vb-hero-title .vb-line { display: block; overflow: hidden; }
.vb-hero-title .vb-line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: riseUp 1.1s var(--ease-out) forwards;
}
.vb-hero-title .vb-line:nth-child(2) > span { animation-delay: .15s; }
@keyframes riseUp { to { transform: translateY(0); } }

.vb-hero-lede {
  max-width: 48rem;
  color: rgba(239, 233, 223, .82);
  margin-bottom: 3.84rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) .55s forwards;
}
.vb-hero-actions {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) .7s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.vb-scroll-cue {
  position: absolute;
  right: clamp(2rem, 4vw, 4.8rem);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.44rem;
  color: rgba(239,233,223,.65);
}
.vb-scroll-cue-label {
  font-size: 0.992rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.vb-scroll-cue-line {
  width: 1px; height: 72px;
  background: rgba(239,233,223,.35);
  position: relative;
  overflow: hidden;
}
.vb-scroll-cue-line::after {
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--brass-lt);
  animation: cueDrop 2.2s var(--ease-out) infinite;
}
@keyframes cueDrop {
  0% { top: -100%; } 55% { top: 100%; } 100% { top: 100%; }
}

/* ---------- ribbon ---------- */

.vb-ribbon {
  background: var(--coal);
  color: rgba(239,233,223,.5);
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  overflow: hidden;
  padding: 1.76rem 0;
}
.vb-ribbon-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: ribbonScroll 36s linear infinite;
  font-family: var(--font-display);
  font-size: 1.68rem;
  font-style: italic;
  letter-spacing: .12em;
}
@keyframes ribbonScroll { to { transform: translateX(-50%); } }

/* ---------- sections base ---------- */

.vb-section-light { background: var(--bone); color: var(--ink); }
.vb-section-dark  { background: var(--coal); color: var(--bone); }

.vb-section-head { margin-bottom: clamp(4.8rem, 6vw, 8rem); }

/* ---------- about ---------- */

.vb-about { padding: clamp(8rem, 10vw, 13.6rem) 0 clamp(6.4rem, 8vw, 11.2rem); }

.vb-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(4rem, 6vw, 9.6rem);
  align-items: start;
}

.vb-about-media { position: relative; padding-bottom: 22%; }
.vb-about-img-main { width: 88%; }
.vb-about-img-float {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  box-shadow: 0 30px 60px -20px rgba(21,18,15,.45);
}
.vb-img-hover { overflow: hidden; }
.vb-img-hover img { transition: transform 1.1s var(--ease-out); }
.vb-img-hover:hover img { transform: scale(1.045); }

.vb-about-copy p + p { margin-top: 2.24rem; }
.vb-about-lead {
  font-family: var(--font-display);
  font-size: clamp(2.16rem, 2.2vw, 2.72rem);
  line-height: 1.45;
  font-weight: 300;
}
.vb-about-quote {
  margin: 3.84rem 0;
  padding-left: 2.88rem;
  border-left: 2px solid var(--brass);
}
.vb-about-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1.5;
  color: var(--oxblood);
}
.vb-about-marks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  margin-top: 4.16rem;
  padding-top: 3.52rem;
  border-top: 1px solid var(--line-l);
}
.vb-mark-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.88rem, 3vw, 4rem);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 0.8rem;
}
.vb-mark-of { font-size: .6em; color: var(--brass); }
.vb-mark-label {
  font-size: 1.12rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(21,18,15,.6);
}

/* ---------- events ---------- */

.vb-events { padding: clamp(6.4rem, 8vw, 11.2rem) 0 clamp(8rem, 10vw, 13.6rem); }
.vb-events .vb-section-head { display: flex; flex-direction: column; }

.vb-event-list { list-style: none; border-top: 1px solid var(--line-l); }

.vb-event-row {
  display: grid;
  grid-template-columns: minmax(12rem, 19.2rem) 1fr auto;
  align-items: center;
  gap: clamp(1.6rem, 3vw, 4.8rem);
  padding: clamp(2.56rem, 3vw, 3.84rem) 0.8rem;
  border-bottom: 1px solid var(--line-l);
  position: relative;
  transition: background-color .5s var(--ease-out), padding-left .5s var(--ease-out);
}
.vb-event-row:hover { background: var(--paper); padding-left: 2.24rem; }

.vb-event-day {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.72rem, 3vw, 3.84rem);
  font-weight: 300;
  line-height: 1;
}
.vb-event-month {
  font-size: 1.12rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.vb-event-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 2.2vw, 2.72rem);
  line-height: 1.2;
}
.vb-event-venue {
  margin-top: 0.56rem;
  font-size: 1.472rem;
  color: rgba(21,18,15,.62);
}
.vb-event-link {
  display: inline-flex;
  align-items: center;
  gap: 0.96rem;
  font-size: 1.184rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.vb-event-link svg { transition: transform .45s var(--ease-out); }
.vb-event-link:hover svg { transform: translateX(6px); }

.vb-events-note { margin-top: 3.52rem; color: rgba(21,18,15,.66); }

/* ---------- work ---------- */

.vb-work { padding: clamp(8rem, 10vw, 13.6rem) 0; }

.vb-work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3.2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(4rem, 5vw, 6.4rem);
}

.vb-filter-bar { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.vb-filter-btn {
  position: relative;
  padding: 1.04rem 2.4rem;
  font-size: 1.184rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(239,233,223,.6);
  border: 1px solid var(--line-d);
  border-radius: 999px;
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out), background-color .4s var(--ease-out);
}
.vb-filter-btn:hover { color: var(--bone); border-color: rgba(239,233,223,.4); }
.vb-filter-btn.is-active {
  color: var(--ink);
  background: var(--brass-lt);
  border-color: var(--brass-lt);
}

/* CSS multi-column masonry — no JS layout, cannot collapse, and works
   natively with Bricks' lazy-loaded images (no width/height needed). */
.vb-masonry {
  column-count: 3;
  column-gap: 2.8rem;
}
@media (max-width: 900px) { .vb-masonry { column-count: 2; } }
@media (max-width: 560px) { .vb-masonry { column-count: 1; } }

.vb-masonry-item {
  display: inline-block;   /* helps Safari keep items intact across columns */
  width: 100%;
  margin: 0 0 2.8rem;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.vb-masonry-item.is-hidden { display: none; }
/* Gentle entrance for items shown after a filter change */
.vb-masonry-item.vb-pop { animation: vbPop .5s var(--ease-out) both; }
@keyframes vbPop {
  from { opacity: 0; transform: translateY(1.4rem) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.vb-item-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--coal-2);
}
.vb-item-media img {
  width: 100%;
  transition: transform 1.2s var(--ease-out), opacity .8s;
}
.vb-item-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,18,15,.82), transparent 55%);
  opacity: 0;
  transition: opacity .55s var(--ease-out);
}
.vb-item-media:hover::after { opacity: 1; }
.vb-item-media:hover img { transform: scale(1.055); }

.vb-item-caption {
  position: absolute;
  left: 2.24rem; right: 2.24rem; bottom: 1.92rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .55s var(--ease-out), opacity .55s var(--ease-out);
}
.vb-item-media:hover .vb-item-caption { transform: none; opacity: 1; }
.vb-item-cat {
  font-size: 0.992rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass-lt);
}
.vb-item-title {
  font-family: var(--font-display);
  font-size: 1.84rem;
  font-weight: 400;
  color: var(--bone);
}

/* ---------- contact ---------- */

.vb-contact {
  padding: clamp(8rem, 10vw, 14.4rem) 0;
  background:
    radial-gradient(1200px 600px at 85% 110%, rgba(124,47,40,.28), transparent 60%),
    var(--coal);
  border-top: 1px solid var(--line-d);
}
.vb-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(4.8rem, 7vw, 11.2rem);
  align-items: start;
}
.vb-contact-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4.16rem, 5.5vw, 7.36rem);
  line-height: 1.06;
  margin-bottom: 2.88rem;
}
.vb-contact-title em { color: var(--brass-lt); }
.vb-contact-lede { max-width: 48rem; color: rgba(239,233,223,.75); margin-bottom: 4.16rem; }

.vb-contact-email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.84rem, 2.4vw, 2.56rem);
  font-style: italic;
  color: var(--brass-lt);
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease-out), color .3s;
}
.vb-contact-email:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--bone); }
.vb-contact-socials { margin-top: 2.56rem; font-size: 1.36rem; letter-spacing: .12em; text-transform: uppercase; }

.vb-contact-form .vb-field { position: relative; margin-bottom: 3.2rem; }
.vb-contact-form label {
  display: block;
  font-size: 1.088rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(239,233,223,.55);
  margin-bottom: 0.8rem;
}
.vb-contact-form input,
.vb-contact-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-d);
  color: var(--bone);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.68rem;
  padding: 0.8rem 0 1.28rem;
  outline: none;
  resize: vertical;
  transition: border-color .4s;
}
.vb-contact-form .vb-field::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass-lt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.vb-contact-form .vb-field:focus-within::after { transform: scaleX(1); }
.vb-btn-submit { background: var(--brass-lt); border-color: var(--brass-lt); color: var(--ink); width: 100%; }
.vb-btn-submit::after { background: var(--bone); }
.vb-form-note { margin-top: 1.6rem; font-size: 1.44rem; color: var(--brass-lt); min-height: 1.4em; }

/* ---------- footer ---------- */

.vb-site-footer {
  background: var(--ink);
  color: rgba(239,233,223,.55);
  border-top: 1px solid var(--line-d);
  padding: 4.8rem 0;
}
.vb-footer-inner {
  display: flex;
  align-items: baseline;
  gap: 3.2rem;
  flex-wrap: wrap;
}
.vb-footer-brand {
  font-family: var(--font-display);
  font-size: 1.76rem;
  color: var(--bone);
}
.vb-footer-brand em { color: var(--brass-lt); }
.vb-footer-meta { font-size: 1.28rem; letter-spacing: .08em; }
.vb-footer-copy { margin-left: auto; font-size: 1.28rem; }

/* ---------- lightbox ---------- */

.vb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 12, 10, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility .45s;
}
.vb-lightbox.is-open { opacity: 1; visibility: visible; }
.vb-lightbox-stage {
  max-width: min(88vw, 1200px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.vb-lightbox-stage img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.vb-lightbox.is-switching .vb-lightbox-stage img { opacity: 0; transform: scale(.985); }
.vb-lightbox-caption {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(239,233,223,.75);
}
.vb-lightbox-close,
.vb-lightbox-prev,
.vb-lightbox-next {
  position: absolute;
  color: rgba(239,233,223,.7);
  transition: color .3s, transform .3s var(--ease-out);
  z-index: 2;
}
.vb-lightbox-close { top: 1.92rem; right: 2.56rem; font-size: 3.84rem; font-weight: 300; line-height: 1; }
.vb-lightbox-close:hover { color: var(--bone); transform: rotate(90deg); }
.vb-lightbox-prev { left: 2.24rem; }
.vb-lightbox-next { right: 2.24rem; }
.vb-lightbox-prev:hover, .vb-lightbox-next:hover { color: var(--bone); transform: scale(1.15); }

/* ---------- reveal on scroll ---------- */

.vb-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.vb-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .vb-about-grid { grid-template-columns: 1fr; }
  .vb-about-media { padding-bottom: 16%; max-width: 620px; }
  .vb-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .vb-site-nav, .vb-header-cta { display: none; }
  .vb-nav-toggle { display: flex; }
  .vb-event-row { grid-template-columns: minmax(9.6rem, 12.8rem) 1fr; }
  .vb-event-link { grid-column: 2; justify-self: start; margin-top: 0.64rem; }
}

@media (max-width: 560px) {
  .vb-hero-actions .vb-btn { width: 100%; }
  .vb-about-marks { grid-template-columns: 1fr; gap: 1.92rem; }
  .vb-footer-copy { margin-left: 0; }
  .vb-scroll-cue { display: none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .vb-ribbon-track { animation: none; }
  .vb-reveal { opacity: 1; transform: none; }
  .vb-hero-title .vb-line > span { transform: none; animation: none; }
  .vb-hero-lede, .vb-hero-actions { opacity: 1; animation: none; }
}


/* ============================================================
   Bricks Builder compatibility
   ============================================================ */

/* Neutralise theme margins inside portfolio roots */
.vb-hero :is(h1,h2,h3,p), .vb-section-light :is(h1,h2,h3,p), .vb-section-dark :is(h1,h2,h3,p),
.vb-site-footer p { margin: 0; }
.vb-section-light p + p, .vb-about-copy p + p { margin-top: 2.24rem; }

/* Bricks button element carries .brxe-button — lock our look in */
.brxe-button.vb-btn, a.vb-btn { text-decoration: none; }
.brxe-button.vb-btn:focus { outline-offset: 3px; }

/* Nav (Nested) element inside the header */
.vb-site-header .brxe-nav-nested { margin-left: auto; }
.vb-site-header .brx-nav-nested-items { display: flex; gap: 3.84rem; list-style: none; align-items: center; margin: 0; padding: 0; }

/* Bricks Form element in the contact section */
.vb-contact-form .form-group { position: relative; margin-bottom: 3.2rem; }
.vb-contact-form .form-group label {
  display: block;
  font-size: 1.088rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(239,233,223,.55);
  margin-bottom: 0.8rem;
}
.vb-contact-form .form-group input:not([type="submit"]),
.vb-contact-form .form-group textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line-d);
  color: var(--bone);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.68rem;
  padding: 0.8rem 0 1.28rem;
  outline: none;
  box-shadow: none;
  transition: border-color .4s;
}
.vb-contact-form .form-group input:focus,
.vb-contact-form .form-group textarea:focus { border-bottom-color: var(--brass-lt); }
.vb-contact-form .submit-button-wrapper button,
.vb-contact-form button[type="submit"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.6rem 3.52rem;
  font-size: 1.248rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: var(--brass-lt);
  border: 1px solid var(--brass-lt);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.vb-contact-form .submit-button-wrapper button:hover,
.vb-contact-form button[type="submit"]:hover { background: var(--bone); border-color: var(--bone); }
.vb-contact-form .form-group.error input,
.vb-contact-form .form-group.error textarea { border-bottom-color: var(--oxblood); }

/* Bricks wraps loop output in a .brx-query-trail marker — keep it out of flow */
.vb-masonry .brx-query-trail { display: none; }

/* Keep the builder usable: reveals visible while editing in Bricks.
   .vb-builder is added to <body> by the plugin inside the builder iframe.
   (The CSS-columns masonry needs no builder-specific override.) */
body.vb-builder .vb-reveal { opacity: 1 !important; transform: none !important; }
body.vb-builder .vb-hero-title .vb-line > span { transform: none; animation: none; }
body.vb-builder .vb-hero-lede, body.vb-builder .vb-hero-actions { opacity: 1; animation: none; }