/*
Theme Name: Vicen Seascapes
Theme URI: https://example.com/
Author: OpenAI
Description: A premium dark fine-art photography theme for seascapes, photo stories and external WooCommerce metal-print catalogues.
Version: 1.3.49
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: vicen-seascapes
*/

:root {
  --vs-black: #050505;
  --vs-black-2: #0b0b0b;
  --vs-black-3: #111111;
  --vs-paper: #f2f0ea;
  --vs-white: #ffffff;
  --vs-muted: #a3a3a0;
  --vs-muted-2: #737370;
  --vs-gold: #c4a260;
  --vs-line: rgba(255,255,255,.14);
  --vs-line-soft: rgba(255,255,255,.08);
  --vs-max: 1760px;
  --vs-reading: 800px;
  --vs-pad: clamp(18px, 3.2vw, 58px);
  --vs-gap: clamp(10px, 1.1vw, 18px);
  --vs-photo-radius: 6px;
  --vs-serif: Georgia, 'Times New Roman', serif;
  --vs-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--vs-black); }
body {
  margin: 0;
  color: var(--vs-paper);
  background: var(--vs-black);
  font-family: var(--vs-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
figure { margin: 0; }

.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;
}

.vs-wrap {
  width: min(calc(100% - (var(--vs-pad) * 2)), var(--vs-max));
  margin-inline: auto;
}
.vs-overline {
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .23em;
  line-height: 1.3;
  text-transform: uppercase;
}
.vs-text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.82);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.vs-text-link span { color: var(--vs-gold); font-size: 1.1rem; }
.vs-text-link:hover { color: var(--vs-white); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  color: var(--vs-paper);
  background: rgba(5,5,5,.96);
  border-bottom: 1px solid var(--vs-line-soft);
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
.admin-bar .site-header { top: 32px; }
.site-header--overlay {
  position: fixed;
  left: 0; right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,0));
  border-bottom-color: transparent;
}
.site-header--overlay.is-scrolled {
  background: rgba(5,5,5,.94);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--vs-line-soft);
}
.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.site-branding { min-width: 0; }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo-link img { width: auto; max-height: 44px; }
.site-title {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
  text-transform: uppercase;
}
.site-title strong {
  font-family: var(--vs-serif);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .16em;
}
.site-title span {
  color: rgba(255,255,255,.53);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .25em;
}
.main-navigation { margin-left: auto; }
.main-navigation ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 38px);
  margin: 0;
  padding: 0;
}
.main-navigation a {
  position: relative;
  display: block;
  padding: 29px 0;
  color: rgba(255,255,255,.72);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--vs-white); }
.main-navigation a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 23px;
  height: 1px;
  background: var(--vs-gold);
  transition: right .22s ease;
}
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after { right: 0; }
.menu-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 10px 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.menu-toggle i,
.menu-toggle i::before {
  content: '';
  display: block;
  width: 23px;
  height: 1px;
  background: currentColor;
  transition: transform .2s ease;
}
.menu-toggle i::before { transform: translateY(6px); }
.menu-toggle.is-open i { transform: rotate(45deg); }
.menu-toggle.is-open i::before { transform: rotate(90deg); }

/* Hero */
.vs-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--vs-black);
}
.vs-hero--empty {
  background:
    radial-gradient(circle at 72% 26%, rgba(196,162,96,.23), transparent 30%),
    linear-gradient(135deg, #131313, #030303 62%);
}
.vs-hero-media,
.vs-hero-media img,
.vs-hero-shade { position: absolute; inset: 0; }
.vs-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.002);
}
.vs-hero-shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 48%, rgba(0,0,0,.08) 80%),
    linear-gradient(180deg, rgba(0,0,0,.24), transparent 38%, rgba(0,0,0,.60));
}
.vs-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 150px;
  padding-bottom: clamp(82px, 10vh, 128px);
}
.vs-hero h1 {
  max-width: 1000px;
  margin: 16px 0 0;
  font-family: var(--vs-serif);
  font-size: clamp(4.2rem, 10vw, 10.6rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .78;
  text-transform: uppercase;
}
.vs-hero-copy {
  max-width: 560px;
  margin: 30px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(.96rem, 1.25vw, 1.13rem);
  line-height: 1.65;
}
.vs-hero-actions { margin-top: 34px; }
.vs-hero-caption {
  position: absolute;
  z-index: 3;
  right: var(--vs-pad);
  bottom: 30px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: rgba(255,255,255,.72);
  font-size: .61rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.vs-hero-caption small { color: rgba(255,255,255,.46); font-size: inherit; }

/* Signature strip */
.vs-signature-strip {
  border-top: 1px solid var(--vs-line);
  border-bottom: 1px solid var(--vs-line);
  background: var(--vs-black-2);
}
.vs-signature-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.vs-filter-button {
  min-height: 64px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--vs-line-soft);
  color: rgba(255,255,255,.54);
  background: transparent;
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.vs-filter-button:first-child { border-left: 1px solid var(--vs-line-soft); }
.vs-filter-button:hover { color: var(--vs-paper); background: rgba(255,255,255,.025); }
.vs-filter-button.is-active {
  color: var(--vs-gold);
  background: rgba(196,162,96,.045);
  box-shadow: inset 0 -2px 0 var(--vs-gold);
}
.vs-filter-button[data-vs-home-filter='golden']:not(.is-active) { color: rgba(212,177,103,.78); }
.vs-filter-button[data-vs-home-filter='bw']:not(.is-active) { color: rgba(255,255,255,.82); }

/* Intro */
.vs-intro-section { background: var(--vs-black); }
.vs-intro {
  display: grid;
  grid-template-columns: minmax(160px, .55fr) minmax(0, 1.75fr);
  gap: 60px;
  padding-top: clamp(90px, 10vw, 150px);
  padding-bottom: clamp(90px, 10vw, 150px);
  border-bottom: 1px solid var(--vs-line-soft);
}
.vs-intro-copy {
  max-width: 1120px;
  margin: 0;
  font-family: var(--vs-serif);
  font-size: clamp(2.7rem, 5.3vw, 6.1rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .99;
}

/* Section heads */
.vs-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(42px, 6vw, 80px);
}
.vs-section-head h2,
.vs-shop-intro h2,
.vs-shop-hero h1,
.vs-gallery-head h1 {
  margin: 10px 0 0;
  font-family: var(--vs-serif);
  font-size: clamp(3.3rem, 7vw, 8.2rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .84;
  text-transform: uppercase;
}

/* Selected works editorial grid */
.vs-works-section {
  padding-top: clamp(90px, 10vw, 150px);
  padding-bottom: clamp(110px, 12vw, 190px);
  background: var(--vs-black);
}
.vs-editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(42px, 7vw, 120px) var(--vs-gap);
  align-items: start;
}
.vs-photo-card { min-width: 0; }
.vs-photo-card--editorial:nth-child(6n+1) { grid-column: 1 / span 7; }
.vs-photo-card--editorial:nth-child(6n+2) { grid-column: 9 / span 4; margin-top: 10vw; }
.vs-photo-card--editorial:nth-child(6n+3) { grid-column: 2 / span 4; }
.vs-photo-card--editorial:nth-child(6n+4) { grid-column: 6 / span 7; margin-top: 6vw; }
.vs-photo-card--editorial:nth-child(6n+5) { grid-column: 1 / span 6; margin-top: 2vw; }
.vs-photo-card--editorial:nth-child(6n+6) { grid-column: 8 / span 5; }
.vs-photo-card-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--vs-photo-radius);
  background: var(--vs-black-3);
}
.vs-photo-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(0,0,0,.54));
  opacity: 0;
  transition: opacity .25s ease;
}
.vs-photo-card-image img {
  width: 100%;
  height: auto;
  transition: transform .55s cubic-bezier(.2,.75,.2,1), filter .35s ease;
}
.vs-photo-card-image:hover img { transform: scale(1.012); }
.vs-photo-card-image:hover::after { opacity: 1; }
.vs-photo-card-view {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 18px;
  opacity: 0;
  transform: translateY(6px);
  color: var(--vs-white);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .25s ease, transform .25s ease;
}
.vs-photo-card-image:hover .vs-photo-card-view { opacity: 1; transform: translateY(0); }
.vs-photo-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
}
.vs-photo-card-meta h3 {
  margin: 0;
  font-family: var(--vs-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.8rem);
  font-weight: 400;
  line-height: 1.05;
}
.vs-photo-card-meta p {
  margin: 0;
  color: var(--vs-muted-2);
  font-size: .58rem;
  letter-spacing: .10em;
  text-align: right;
  text-transform: uppercase;
}

/* Editorial Mediterranean */
.vs-mediterranean {
  position: relative;
  min-height: 72svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--vs-line-soft);
  border-bottom: 1px solid var(--vs-line-soft);
  background: var(--vs-black-2);
}
.vs-mediterranean-media,
.vs-mediterranean-shade { position: absolute; inset: 0; }
.vs-mediterranean-media { background-position: center; background-size: cover; filter: saturate(.85) contrast(1.03); }
.vs-mediterranean-shade { background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.50) 52%, rgba(0,0,0,.25)); }
.vs-mediterranean-inner { position: relative; z-index: 2; padding-top: 100px; padding-bottom: 100px; }
.vs-mediterranean h2 {
  max-width: 980px;
  margin: 16px 0 0;
  font-family: var(--vs-serif);
  font-size: clamp(3.4rem, 7.4vw, 8.3rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .85;
}
.vs-mediterranean p:last-child {
  max-width: 570px;
  margin: 30px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 1rem;
}

/* Category collections */
.vs-category-section {
  padding: clamp(90px, 10vw, 145px) 0;
  background: var(--vs-black);
  border-bottom: 1px solid var(--vs-line-soft);
}
.vs-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--vs-gap);
}
.vs-category-grid .vs-photo-card-meta { padding-top: 12px; }
.vs-category-grid .vs-photo-card-meta h3 { font-size: clamp(1rem, 1.35vw, 1.35rem); }

/* Masonry gallery */
.vs-gallery-page,
.vs-archive { background: var(--vs-black); }
.vs-gallery-head,
.vs-archive-head {
  padding-top: clamp(115px, 12vw, 180px);
  padding-bottom: clamp(50px, 6vw, 90px);
  border-bottom: 1px solid var(--vs-line-soft);
}
.vs-gallery-head p,
.vs-archive-head p,
.vs-archive-description {
  max-width: 650px;
  margin: 26px 0 0;
  color: var(--vs-muted);
}
.vs-masonry {
  column-count: 4;
  column-gap: var(--vs-gap);
  padding-top: var(--vs-gap);
  padding-bottom: clamp(90px, 10vw, 150px);
}
.vs-masonry .vs-photo-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--vs-gap);
  break-inside: avoid;
}
.vs-home-collection-grid { padding-top: 0; padding-bottom: 0; }
.vs-filter-empty {
  padding: 50px 0 10px;
  color: var(--vs-muted);
  font-family: var(--vs-serif);
  font-size: clamp(1.4rem, 2.5vw, 2.3rem);
}
.vs-masonry .vs-photo-card-meta {
  position: absolute;
  z-index: 3;
  left: 18px; right: 18px; bottom: 16px;
  display: block;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .25s ease, transform .25s ease;
}
.vs-masonry .vs-photo-card { position: relative; }
.vs-masonry .vs-photo-card:hover .vs-photo-card-meta { opacity: 1; transform: translateY(0); }
.vs-masonry .vs-photo-card-meta h3 { color: var(--vs-white); font-size: 1.18rem; }
.vs-masonry .vs-photo-card-meta p { margin-top: 5px; color: rgba(255,255,255,.64); text-align: left; }
.vs-pagination { padding: 0 0 100px; }
.vs-pagination .nav-links { display: flex; gap: 12px; }
.vs-pagination a,
.vs-pagination span {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--vs-line);
  color: var(--vs-muted);
  font-size: .72rem;
}
.vs-pagination .current,
.vs-pagination a:hover { color: var(--vs-white); border-color: var(--vs-gold); }

/* Single photograph */
.vs-single { background: var(--vs-black); }
.vs-single-head {
  padding-top: clamp(120px, 12vw, 180px);
  padding-bottom: clamp(45px, 6vw, 75px);
}
.vs-single-head h1 {
  max-width: 1200px;
  margin: 12px 0 0;
  font-family: var(--vs-serif);
  font-size: clamp(3.6rem, 8vw, 9rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .84;
  text-transform: uppercase;
}
.vs-single-location {
  margin: 22px 0 0;
  color: var(--vs-muted);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vs-single-media {
  width: min(calc(100% - (var(--vs-pad) * 2)), 1920px);
  margin-inline: auto;
  background: var(--vs-black-2);
}
.vs-single-media img { width: 100%; height: auto; }
.vs-single-body {
  display: grid;
  grid-template-columns: 220px minmax(0, var(--vs-reading));
  justify-content: center;
  gap: clamp(44px, 7vw, 110px);
  padding-top: clamp(70px, 8vw, 120px);
  padding-bottom: clamp(90px, 10vw, 150px);
}
.vs-single-aside {
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: var(--vs-muted-2);
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vs-single-aside a { color: var(--vs-paper); }
.vs-entry-content {
  color: #d8d6d0;
  font-family: var(--vs-serif);
  font-size: clamp(1.12rem, 1.4vw, 1.28rem);
  line-height: 1.82;
}
.vs-entry-content > *:first-child { margin-top: 0; }
.vs-entry-content h2,
.vs-entry-content h3 {
  color: var(--vs-paper);
  font-family: var(--vs-serif);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.vs-entry-content h2 { margin-top: 2em; font-size: clamp(2rem, 4vw, 3.8rem); }
.vs-entry-content h3 { margin-top: 1.8em; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.vs-entry-content a { color: var(--vs-paper); border-bottom: 1px solid var(--vs-gold); }
.vs-entry-content blockquote {
  margin: 2.4em 0;
  padding-left: 24px;
  border-left: 1px solid var(--vs-gold);
  color: var(--vs-paper);
  font-size: 1.3em;
  line-height: 1.45;
}
.vs-print-cta {
  margin-top: 50px;
  padding: 30px 0;
  border-top: 1px solid var(--vs-line);
  border-bottom: 1px solid var(--vs-line);
}
.vs-print-cta strong {
  display: block;
  margin-bottom: 6px;
  color: var(--vs-paper);
  font-family: var(--vs-serif);
  font-size: 1.6rem;
  font-weight: 400;
}
.vs-print-cta span { display: block; margin-bottom: 18px; color: var(--vs-muted); font-family: var(--vs-sans); font-size: .82rem; }
.vs-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--vs-line-soft);
}
.vs-post-nav > div { min-width: 0; }
.vs-post-nav > div + div { border-left: 1px solid var(--vs-line-soft); }
.vs-post-nav a {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px var(--vs-pad);
  transition: background .2s ease;
}
.vs-post-nav a:hover { background: var(--vs-black-2); }
.vs-post-nav small { color: var(--vs-muted-2); font-size: .58rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.vs-post-nav strong { margin-top: 8px; font-family: var(--vs-serif); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 400; line-height: 1.1; }

/* Pages */
.vs-page {
  width: min(calc(100% - (var(--vs-pad) * 2)), 1050px);
  margin-inline: auto;
  padding: clamp(120px, 12vw, 180px) 0;
}
.vs-page-title {
  margin: 0 0 58px;
  font-family: var(--vs-serif);
  font-size: clamp(3.6rem, 8vw, 8.7rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .84;
  text-transform: uppercase;
}
.vs-page .vs-entry-content { max-width: 100%; }

/* WooCommerce - dark gallery first */
.vs-shop-page {
  min-height: 70vh;
  padding-bottom: clamp(90px, 10vw, 150px);
  background: var(--vs-black);
}
.vs-shop-hero {
  padding-top: clamp(120px, 12vw, 180px);
  padding-bottom: clamp(48px, 6vw, 82px);
  border-bottom: 1px solid var(--vs-line-soft);
}
.vs-shop-hero p:last-child {
  max-width: 670px;
  margin: 26px 0 0;
  color: var(--vs-muted);
}
.woocommerce .woocommerce-breadcrumb { display: none; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { display: none; }
.woocommerce .woocommerce-notices-wrapper { padding-top: 22px; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  color: var(--vs-paper);
  background: var(--vs-black-2);
  border-top-color: var(--vs-gold);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--vs-gold); }

/* Masonry products, true aspect ratios */
.woocommerce ul.products {
  display: block !important;
  column-count: 4;
  column-gap: var(--vs-gap);
  margin: var(--vs-gap) 0 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
  position: relative;
  float: none !important;
  display: inline-block;
  width: 100% !important;
  margin: 0 0 var(--vs-gap) !important;
  padding: 0 !important;
  break-inside: avoid;
  overflow: hidden;
  background: var(--vs-black-2);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--vs-photo-radius);
  color: var(--vs-white);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.78));
  opacity: 0;
  transition: opacity .25s ease;
}
.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link::after { opacity: 1; }
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: initial !important;
  margin: 0 !important;
  background: var(--vs-black-3);
  transition: transform .55s cubic-bezier(.2,.75,.2,1);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.012); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  position: absolute;
  z-index: 3;
  left: 18px; right: 18px; bottom: 39px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--vs-white) !important;
  font-family: var(--vs-serif);
  font-size: clamp(1rem, 1.3vw, 1.35rem) !important;
  font-weight: 400 !important;
  line-height: 1.05;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.woocommerce ul.products li.product .vs-product-kicker {
  position: absolute;
  z-index: 3;
  left: 18px; right: 18px; bottom: 16px;
  color: rgba(255,255,255,.62);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease .02s, transform .25s ease .02s;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover .vs-product-kicker { opacity: 1; transform: translateY(0); }
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .button { display: none !important; }
.woocommerce span.onsale {
  top: 12px !important; left: 12px !important; right: auto !important;
  min-width: 0; min-height: 0; line-height: 1;
  margin: 0 !important; padding: 8px 9px;
  border-radius: 0;
  color: var(--vs-black);
  background: var(--vs-paper);
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Home product gallery */
.vs-shop-section {
  padding: clamp(95px, 11vw, 165px) 0;
  background: var(--vs-black-2);
  border-top: 1px solid var(--vs-line-soft);
}
.vs-shop-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .65fr);
  align-items: end;
  gap: 60px;
  margin-bottom: clamp(50px, 6vw, 84px);
}
.vs-shop-intro p { margin: 0; color: var(--vs-muted); }
.vs-shop-intro .vs-text-link { margin-top: 18px; }
.vs-home-products .woocommerce ul.products { column-count: 4; }

/* Single product fallback (when direct redirect is disabled) */
.woocommerce div.product { padding-top: clamp(120px, 12vw, 180px); color: var(--vs-paper); }
.woocommerce div.product .product_title {
  font-family: var(--vs-serif);
  font-size: clamp(3rem, 6vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .88;
  text-transform: uppercase;
}
.woocommerce div.product div.images img { width: 100%; height: auto; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--vs-muted); }
.woocommerce div.product .summary { color: #d8d6d0; }
.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border: 1px solid var(--vs-paper) !important;
  border-radius: 0 !important;
  color: var(--vs-black) !important;
  background: var(--vs-paper) !important;
  font-size: .60rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.woocommerce-tabs ul.tabs::before { border-bottom-color: var(--vs-line) !important; }
.woocommerce-tabs ul.tabs li { border-color: var(--vs-line) !important; background: var(--vs-black-2) !important; }
.woocommerce-tabs ul.tabs li a { color: var(--vs-muted) !important; }
.woocommerce-tabs ul.tabs li.active a { color: var(--vs-paper) !important; }
.related.products > h2,
.upsells.products > h2 { font-family: var(--vs-serif); font-weight: 400; font-size: clamp(2rem, 4vw, 4rem); }

/* Footer */
.site-footer {
  color: var(--vs-paper);
  background: #020202;
  border-top: 1px solid var(--vs-line);
}
.footer-top {
  min-height: 300px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
  padding-top: 70px;
  padding-bottom: 70px;
}
.footer-brand {
  margin-top: 12px;
  font-family: var(--vs-serif);
  font-size: clamp(2.8rem, 6vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .88;
  text-transform: uppercase;
}
.footer-collection-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.footer-collection-link span { color: var(--vs-gold); font-size: 1.1rem; }
.footer-bottom {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--vs-line-soft);
}
.footer-note { color: rgba(255,255,255,.42); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; }
.footer-menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; }
.footer-menu a { color: rgba(255,255,255,.55); font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer-menu a:hover { color: var(--vs-white); }

/* Forms / misc */
input[type='text'], input[type='email'], input[type='url'], input[type='search'], textarea, select {
  width: 100%;
  border: 1px solid var(--vs-line);
  border-radius: 0;
  background: var(--vs-black-2);
  color: var(--vs-paper);
  padding: 13px 14px;
}
.vs-empty { padding: 60px 0 110px; color: var(--vs-muted); }

@media (max-width: 1250px) {
  .vs-masonry,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products { column-count: 3; }
  .vs-category-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 1050px) {
  .admin-bar .site-header { top: 46px; }
  .menu-toggle { display: inline-flex; }
  .main-navigation {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    padding: 8px var(--vs-pad) 26px;
    color: var(--vs-white);
    background: rgba(5,5,5,.98);
    border-top: 1px solid var(--vs-line-soft);
  }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { display: block; }
  .main-navigation a { padding: 14px 0; }
  .main-navigation a::after { display: none; }
  .vs-editorial-grid { row-gap: 70px; }
  .vs-photo-card--editorial:nth-child(6n+1) { grid-column: 1 / span 8; }
  .vs-photo-card--editorial:nth-child(6n+2) { grid-column: 9 / span 4; }
  .vs-photo-card--editorial:nth-child(6n+3) { grid-column: 1 / span 5; }
  .vs-photo-card--editorial:nth-child(6n+4) { grid-column: 6 / span 7; }
  .vs-photo-card--editorial:nth-child(6n+5) { grid-column: 1 / span 7; }
  .vs-photo-card--editorial:nth-child(6n+6) { grid-column: 9 / span 4; }
  .vs-masonry,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products { column-count: 2; }
  .vs-category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  :root { --vs-pad: 16px; --vs-gap: 10px; }
  .header-inner { min-height: 68px; }
  .site-title strong { font-size: .92rem; }
  .site-title span { display: none; }
  .vs-hero { min-height: 88svh; }
  .vs-hero-content { padding-top: 130px; padding-bottom: 88px; }
  .vs-hero h1 { max-width: 96%; font-size: clamp(3.5rem, 19vw, 6.4rem); line-height: .8; }
  .vs-hero-copy { max-width: 92%; font-size: .94rem; }
  .vs-hero-caption { left: var(--vs-pad); right: var(--vs-pad); bottom: 18px; justify-content: space-between; }

  .vs-signature-strip-inner { grid-template-columns: repeat(2,1fr); }
  .vs-filter-button { min-height: 56px; border-bottom: 1px solid var(--vs-line-soft); }
  .vs-filter-button:nth-child(2n+1) { border-left: 1px solid var(--vs-line-soft); }

  .vs-intro { grid-template-columns: 1fr; gap: 28px; padding-top: 75px; padding-bottom: 75px; }
  .vs-intro-copy { font-size: clamp(2.35rem, 11vw, 4.2rem); }
  .vs-works-section { padding-top: 75px; padding-bottom: 95px; }
  .vs-section-head { align-items: flex-start; flex-direction: column; margin-bottom: 44px; }
  .vs-section-head h2,
  .vs-shop-intro h2,
  .vs-shop-hero h1,
  .vs-gallery-head h1 { font-size: clamp(3.2rem, 15vw, 5.8rem); }
  .vs-editorial-grid { display: block; }
  .vs-photo-card--editorial { margin: 0 0 54px !important; }
  .vs-photo-card--editorial:nth-child(even) { margin-left: 9% !important; }
  .vs-photo-card--editorial:nth-child(odd) { margin-right: 5% !important; }
  .vs-photo-card-view { display: none; }
  .vs-photo-card-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .vs-photo-card-meta p { text-align: left; }

  .vs-mediterranean { min-height: 66svh; }
  .vs-mediterranean h2 { font-size: clamp(3rem, 14vw, 5.8rem); }
  .vs-category-grid { grid-template-columns: 1fr; gap: 44px; }

  .vs-gallery-head,
  .vs-archive-head,
  .vs-shop-hero { padding-top: 100px; }
  .vs-masonry,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products { column-count: 1; }
  .vs-masonry .vs-photo-card-meta,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .vs-product-kicker {
    opacity: 1;
    transform: none;
  }
  .vs-masonry .vs-photo-card-meta { position: static; display: block; padding: 11px 1px 0; }
  .vs-masonry .vs-photo-card-meta h3 { color: var(--vs-paper); }
  .vs-masonry .vs-photo-card-meta p { color: var(--vs-muted-2); }
  .vs-masonry .vs-photo-card-image::after { display: none; }
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after { opacity: 1; }

  .vs-single-head h1 { font-size: clamp(3.2rem, 15vw, 6rem); }
  .vs-single-media { width: 100%; }
  .vs-single-body { grid-template-columns: 1fr; gap: 34px; }
  .vs-single-aside { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--vs-line); }
  .vs-post-nav { grid-template-columns: 1fr; }
  .vs-post-nav > div + div { border-left: 0; border-top: 1px solid var(--vs-line-soft); }

  .vs-shop-intro { grid-template-columns: 1fr; gap: 34px; }
  .footer-top { min-height: 250px; align-items: flex-start; flex-direction: column; justify-content: flex-end; }
  .footer-bottom { align-items: flex-start; flex-direction: column; padding-top: 24px; padding-bottom: 24px; }
}

/* ==========================================================================
   v1.3 — Gold + monochrome identity / immersive photograph viewer
   ========================================================================== */

[hidden] { display: none !important; }

/* A very small radius softens every photographic surface without turning the
   portfolio into card UI. Full-bleed hero/background imagery stays edge-to-edge. */
.vs-photo-card-image img,
.vs-photo-stage-image,
.vs-single-media img,
.vs-classic-featured img,
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img,
.entry-content .wp-block-image img,
.entry-content .wp-block-gallery img {
  border-radius: var(--vs-photo-radius);
}

.woocommerce div.product div.images .woocommerce-product-gallery__image {
  overflow: hidden;
  border-radius: var(--vs-photo-radius);
}

/* The site identity mirrors the two photographic families: black & white + gold. */
.site-title strong { color: var(--vs-gold); }
.site-title span { color: rgba(255,255,255,.72); }
.vs-overline { color: var(--vs-gold); }
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--vs-gold); }
.footer-brand { color: var(--vs-gold); }

body.vs-modal-open { overflow: hidden; }

/* Ajax lightbox container. Clicking a photo keeps its real permalink in the URL. */
.vs-photo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 46px);
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(5px);
  animation: vsModalFade .18s ease-out both;
}
.admin-bar .vs-photo-modal-overlay { top: 32px; }
.vs-photo-modal-overlay.is-closing { animation: vsModalFadeOut .16s ease-in both; }
@keyframes vsModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vsModalFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Direct permalink version uses exactly the same visual shell. */
.vs-photo-viewer-body { background: #030303; }
.vs-photo-viewer-body .site-footer { display: none; }
.vs-photo-viewer-page {
  min-height: calc(100svh - 77px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.4vw, 38px) var(--vs-pad);
  background: #030303;
}

.vs-photo-modal-shell {
  position: relative;
  width: min(96vw, 1510px);
  height: min(88svh, 930px);
  min-height: 590px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(355px, 410px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  background: #1b1b1b;
  box-shadow: 0 32px 110px rgba(0,0,0,.64);
  animation: vsShellIn .2s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes vsShellIn {
  from { opacity: 0; transform: translateY(8px) scale(.994); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.vs-photo-close {
  position: absolute;
  z-index: 8;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: var(--vs-paper);
  background: rgba(5,5,5,.72);
  backdrop-filter: blur(10px);
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.vs-photo-close:hover {
  color: var(--vs-gold);
  border-color: rgba(196,162,96,.6);
  background: rgba(5,5,5,.94);
}

.vs-photo-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 28px);
  background: #1c1c1c;
}
.vs-photo-stage-figure {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vs-photo-stage-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.vs-photo-stage-empty {
  color: var(--vs-muted);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vs-photo-panel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #f4f2ec;
  background: #050505;
  border-left: 1px solid rgba(255,255,255,.09);
  scrollbar-width: thin;
  scrollbar-color: #373737 #090909;
}
.vs-photo-panel-inner { padding: 24px 22px 30px; }

.vs-photo-author {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-right: 44px;
  margin-bottom: 27px;
  pointer-events: none;
  user-select: none;
}
.vs-photo-author-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.vs-photo-author-avatar img,
.vs-photo-author-avatar .vs-profile-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.vs-photo-author-avatar .vs-profile-placeholder {
  display: grid;
  place-items: center;
  color: #16120b;
  background: var(--vs-gold);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1;
}
.vs-photo-author > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.vs-photo-author strong {
  color: var(--vs-paper);
  font-size: .91rem;
  font-weight: 700;
}
.vs-photo-author span {
  margin-top: 3px;
  color: var(--vs-muted-2);
  font-size: .7rem;
}

.vs-photo-story h1 {
  margin: 0 0 10px;
  color: var(--vs-paper);
  font-family: var(--vs-sans);
  font-size: clamp(1rem, 1.18vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.vs-photo-description {
  position: relative;
  color: #ece9e2;
  font-size: .91rem;
  line-height: 1.52;
  transition: max-height .24s ease;
}
.vs-photo-description > *:first-child { margin-top: 0; }
.vs-photo-description > *:last-child { margin-bottom: 0; }
.vs-photo-description p { margin: 0 0 .65em; }
.vs-photo-description.is-collapsed {
  max-height: 7.7em;
  overflow: hidden;
}
.vs-photo-description.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.4em;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,5,0), #050505 88%);
}
.vs-photo-description.is-expanded { max-height: none; }
.vs-photo-description.is-expanded::after { display: none; }
.vs-expand-toggle {
  display: inline-block;
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  color: #aaa69c;
  background: transparent;
  font-size: .74rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.vs-expand-toggle:hover { color: var(--vs-gold); }
.vs-expand-toggle.is-unneeded { display: none; }

.vs-photo-meta-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  color: #6f6f6c;
  font-size: .66rem;
  line-height: 1.35;
}
.vs-photo-meta-line a {
  min-width: 0;
  overflow: hidden;
  color: #85827a;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-photo-meta-line a:hover { color: var(--vs-gold); }

.vs-photo-actions {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 17px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.vs-photo-product-action { min-width: 0; }
.vs-photo-product-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgba(196,162,96,.72);
  border-radius: 4px;
  color: #e1c889;
  background: rgba(196,162,96,.06);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.vs-photo-product-button:hover {
  color: #080808;
  background: var(--vs-gold);
  border-color: var(--vs-gold);
}
.vs-photo-product-placeholder {
  color: #77746d;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vs-comment-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 3px 8px 10px;
  border: 0;
  color: var(--vs-paper);
  background: transparent;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
}
.vs-comment-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vs-comment-toggle:hover,
.vs-comment-toggle[aria-expanded='true'] { color: var(--vs-gold); }

.vs-photo-comments { margin-top: 0; }
.vs-photo-comment-composer {
  padding: 18px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.vs-comment-form-title {
  margin: 0 0 12px;
  color: var(--vs-paper);
  font-family: var(--vs-sans);
  font-size: .82rem;
  font-weight: 700;
}
.vs-photo-comment-composer .comment-form { margin: 0; }
.vs-photo-comment-composer .comment-form-comment { margin: 0; }
.vs-photo-comment-composer .comment-form-comment label { display: none; }
.vs-photo-comment-composer textarea {
  min-height: 95px;
  resize: vertical;
  border-radius: 7px;
  border-color: rgba(255,255,255,.12);
  background: #030303;
  font-size: .82rem;
}
.vs-photo-comment-composer .form-submit { margin: 10px 0 0; text-align: right; }
.vs-comment-submit {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--vs-gold);
  border-radius: 4px;
  color: #080808;
  background: var(--vs-gold);
  cursor: pointer;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vs-photo-comment-composer .logged-in-as,
.vs-photo-comment-composer .comment-notes,
.vs-photo-comment-composer .comment-form-author,
.vs-photo-comment-composer .comment-form-email,
.vs-photo-comment-composer .comment-form-url {
  color: var(--vs-muted-2);
  font-size: .7rem;
}
.vs-photo-comment-composer input[type='text'],
.vs-photo-comment-composer input[type='email'],
.vs-photo-comment-composer input[type='url'] {
  margin-top: 4px;
  border-radius: 5px;
  background: #030303;
}

.vs-photo-comments-list { padding-top: 2px; }
.vs-photo-comment {
  display: flex;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.vs-photo-comment.depth-2,
.vs-photo-comment.depth-3,
.vs-photo-comment.depth-4,
.vs-photo-comment.depth-5 { margin-left: 28px; }
.vs-photo-comment-avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.vs-photo-comment-main { min-width: 0; flex: 1; }
.vs-photo-comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.vs-photo-comment-head strong {
  color: #f1eee7;
  font-size: .77rem;
  font-weight: 700;
}
.vs-photo-comment-head time {
  flex: 0 0 auto;
  color: #66645f;
  font-size: .62rem;
}
.vs-photo-comment-content {
  margin-top: 4px;
  color: #e6e2da;
  font-size: .78rem;
  line-height: 1.48;
  overflow-wrap: anywhere;
}
.vs-photo-comment-content p { margin: 0 0 .5em; }
.vs-photo-comment-reply a {
  color: #9d9a92;
  font-size: .65rem;
  font-weight: 700;
}
.vs-photo-comment-reply a:hover { color: var(--vs-gold); }
.vs-comment-awaiting,
.vs-comments-closed { color: var(--vs-muted); font-size: .72rem; }
.vs-photo-comments .navigation { padding: 14px 0; font-size: .68rem; }

/* Traditional articles remain available per post. */
.vs-classic-single { background: var(--vs-black); }
.vs-classic-article { padding: clamp(105px, 10vw, 155px) 0 120px; }
.vs-classic-head { width: min(calc(100% - (var(--vs-pad) * 2)), 1080px); }
.vs-classic-head h1 {
  max-width: 1000px;
  margin: 14px 0 24px;
  color: var(--vs-paper);
  font-family: var(--vs-serif);
  font-size: clamp(3.2rem, 7vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -.052em;
  line-height: .9;
}
.vs-classic-byline {
  display: flex;
  gap: 22px;
  color: var(--vs-muted-2);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vs-classic-featured {
  width: min(calc(100% - (var(--vs-pad) * 2)), 1400px);
  margin-top: 58px;
}
.vs-classic-featured img { width: 100%; height: auto; }
.vs-classic-content,
.vs-classic-comments {
  width: min(calc(100% - (var(--vs-pad) * 2)), var(--vs-reading));
  margin-inline: auto;
}
.vs-classic-content { padding-top: 64px; }
.vs-classic-comments { padding-top: 55px; }
.vs-classic-comments h2 { font-family: var(--vs-serif); font-weight: 400; }
.vs-classic-comments .comment-list { padding-left: 22px; }

@media (max-width: 1100px) {
  .vs-photo-modal-shell {
    grid-template-columns: minmax(0, 1fr) 360px;
    width: min(97vw, 1280px);
  }
}

@media (max-width: 900px) {
  .vs-photo-modal-overlay { padding: 12px; }
  .vs-photo-modal-shell {
    width: min(96vw, 760px);
    height: min(94svh, 980px);
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(45svh, 58svh) minmax(0, 1fr);
    border-radius: 18px;
  }
  .vs-photo-stage { padding: 12px; }
  .vs-photo-panel { border-left: 0; border-top: 1px solid rgba(255,255,255,.09); }
  .vs-photo-viewer-page { min-height: 0; padding: 14px var(--vs-pad) 30px; }
  .vs-photo-viewer-page .vs-photo-modal-shell {
    width: min(100%, 760px);
    height: auto;
    min-height: calc(100svh - 120px);
    grid-template-rows: minmax(45svh, 60svh) auto;
  }
}

@media (max-width: 760px) {
  .admin-bar .vs-photo-modal-overlay { top: 46px; }
  .vs-photo-modal-overlay { padding: 0; align-items: stretch; }
  .vs-photo-modal-overlay .vs-photo-modal-shell {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    grid-template-rows: 54svh minmax(0, 1fr);
  }
  .vs-photo-modal-overlay .vs-photo-panel { overflow-y: auto; }
  .vs-photo-panel-inner { padding: 20px 16px 26px; }
  .vs-photo-close { top: 10px; right: 10px; }
  .vs-photo-meta-line { flex-direction: column; gap: 5px; }
  .vs-photo-actions { min-height: 60px; }
  .vs-photo-product-button { font-size: .62rem; }
  .vs-photo-comment.depth-2,
  .vs-photo-comment.depth-3,
  .vs-photo-comment.depth-4,
  .vs-photo-comment.depth-5 { margin-left: 18px; }
  .vs-classic-article { padding-top: 90px; }
  .vs-classic-featured { margin-top: 38px; }
  .vs-classic-content { padding-top: 42px; }
}


/* ==========================================================================
   v1.3.2 — Collection immediately below filters / Displate print story
   ========================================================================== */

/* The gallery begins directly after the filter strip; the oversized editorial
   statement and Mediterranean interlude were intentionally removed. */
.vs-works-section {
  padding-top: clamp(34px, 4vw, 62px);
  padding-bottom: clamp(90px, 9vw, 150px);
}
.vs-collection-head {
  min-height: 58px;
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 42px);
  border-bottom: 1px solid var(--vs-line-soft);
}
.vs-collection-head h2 {
  margin: 0 0 20px;
  font-family: var(--vs-serif);
  font-size: clamp(2.2rem, 4.2vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
  text-transform: none;
}
.vs-home-collection-grid {
  padding-top: 0;
}

/* Metal Prints on the homepage is now an editorial explanation rather than a
   duplicate WooCommerce product grid. Product imagery lives in the shop. */
.vs-metal-story {
  border-top: 1px solid var(--vs-line-soft);
  background: var(--vs-black-2);
}
.vs-metal-story .vs-shop-intro { margin-bottom: 0; }
.vs-metal-lead {
  max-width: 690px;
}
.vs-metal-lead p {
  margin-top: 0;
}
.vs-metal-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(58px, 7vw, 100px);
  border-top: 1px solid var(--vs-line);
  border-bottom: 1px solid var(--vs-line);
}
.vs-metal-feature {
  min-height: 280px;
  padding: clamp(30px, 3vw, 48px);
  border-right: 1px solid var(--vs-line);
}
.vs-metal-feature:last-child { border-right: 0; }
.vs-metal-index {
  display: block;
  margin-bottom: clamp(50px, 6vw, 90px);
  color: var(--vs-gold);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.vs-metal-feature h3 {
  margin: 0 0 16px;
  font-family: var(--vs-serif);
  font-size: clamp(1.7rem, 2.5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -.035em;
}
.vs-metal-feature p {
  max-width: 470px;
  margin: 0;
  color: var(--vs-muted);
  font-size: .94rem;
  line-height: 1.7;
}
.vs-metal-partner-note {
  max-width: 820px;
  margin: 30px 0 0;
  color: var(--vs-muted-2);
  font-size: .7rem;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .vs-works-section { padding-top: 30px; }
  .vs-collection-head { margin-bottom: 20px; }
  .vs-collection-head h2 { margin-bottom: 16px; font-size: clamp(2rem, 11vw, 3.4rem); }
  .vs-metal-features { grid-template-columns: 1fr; }
  .vs-metal-feature { min-height: 0; border-right: 0; border-bottom: 1px solid var(--vs-line); }
  .vs-metal-feature:last-child { border-bottom: 0; }
  .vs-metal-index { margin-bottom: 36px; }
}


/* ==========================================================================
   v1.3.3 — 500px-inspired photograph cards
   ========================================================================== */

/* Portfolio cards now read as one compact object: photograph above, title below.
   The image keeps its real aspect ratio and only the title is shown. */
.vs-photo-card {
  overflow: hidden;
  border-radius: 12px;
  background: #151515;
  box-shadow: 0 0 0 1px rgba(255,255,255,.035);
}
.vs-photo-card-image {
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #101010;
}
.vs-photo-card-image::after,
.vs-photo-card-view {
  display: none !important;
}
.vs-photo-card-image img {
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0 !important;
}
.vs-photo-card-placeholder {
  aspect-ratio: 4 / 3;
  background: #111;
}
.vs-photo-card-meta,
.vs-masonry .vs-photo-card-meta,
.vs-category-grid .vs-photo-card-meta {
  position: static;
  display: grid;
  place-items: center;
  min-height: 62px;
  padding: 12px 14px 13px;
  opacity: 1;
  transform: none;
  background: #151515;
  border-radius: 0 0 12px 12px;
  pointer-events: auto;
}
.vs-photo-card-meta h3,
.vs-masonry .vs-photo-card-meta h3,
.vs-category-grid .vs-photo-card-meta h3 {
  width: 100%;
  margin: 0;
  color: #f3f1eb;
  font-family: var(--vs-sans);
  font-size: clamp(.92rem, 1.15vw, 1.08rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
}
.vs-photo-card-meta h3 a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.vs-photo-card-meta p { display: none !important; }
.vs-masonry .vs-photo-card:hover .vs-photo-card-meta {
  opacity: 1;
  transform: none;
}
.vs-photo-card-image:hover img { transform: none; }

/* Keep the masonry rhythm while the cards themselves stay visually consistent. */
.vs-masonry .vs-photo-card,
.vs-home-collection-grid .vs-photo-card {
  margin-bottom: var(--vs-gap);
}

/* WooCommerce catalogue uses the same visual language: image + centred title,
   with no price/kicker/card controls competing with the artwork. */
.woocommerce ul.products li.product {
  overflow: hidden;
  border-radius: 12px;
  background: #151515;
  box-shadow: 0 0 0 1px rgba(255,255,255,.035);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  overflow: hidden;
  border-radius: 12px;
  background: #151515;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after {
  display: none !important;
}
.woocommerce ul.products li.product a img {
  border-radius: 12px 12px 0 0 !important;
  transform: none !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  position: static;
  display: grid;
  place-items: center;
  min-height: 62px;
  margin: 0 !important;
  padding: 12px 14px 13px !important;
  color: #f3f1eb !important;
  background: #151515;
  font-family: var(--vs-sans);
  font-size: clamp(.92rem, 1.15vw, 1.08rem) !important;
  font-weight: 400 !important;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
  opacity: 1;
  transform: none;
}
.woocommerce ul.products li.product .vs-product-kicker {
  display: none !important;
}

@media (max-width: 760px) {
  /* 500px-like mobile density: two masonry columns instead of a single huge card. */
  .vs-masonry,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    column-count: 2;
    column-gap: 10px;
  }
  .vs-masonry .vs-photo-card,
  .woocommerce ul.products li.product {
    margin-bottom: 10px !important;
  }
  .vs-photo-card,
  .vs-photo-card-image,
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    border-radius: 11px;
  }
  .vs-photo-card-image,
  .vs-photo-card-image img,
  .woocommerce ul.products li.product a img {
    border-radius: 11px 11px 0 0 !important;
  }
  .vs-photo-card-meta,
  .vs-masonry .vs-photo-card-meta,
  .vs-category-grid .vs-photo-card-meta,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 52px;
    padding: 9px 10px 10px !important;
    border-radius: 0 0 11px 11px;
  }
  .vs-photo-card-meta h3,
  .vs-masonry .vs-photo-card-meta h3,
  .vs-category-grid .vs-photo-card-meta h3,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: .9rem !important;
    line-height: 1.18;
  }
  .vs-photo-card-meta h3 a {
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 360px) {
  .vs-masonry,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    column-gap: 8px;
  }
  .vs-masonry .vs-photo-card,
  .woocommerce ul.products li.product {
    margin-bottom: 8px !important;
  }
  .vs-photo-card-meta h3,
  .vs-masonry .vs-photo-card-meta h3,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: .82rem !important;
  }
}

/* ==========================================================================
   v1.3.6 — responsive photograph viewer
   Desktop: floating fine-art lightbox. Mobile: one continuous 500px-style
   reading surface whose photograph progressively collapses into a strip.
   ========================================================================== */

/* Controls used only by the mobile presentation must never leak into the
   desktop floating viewer. */
.vs-photo-mobile-back,
.vs-photo-mobile-dock { display: none; }

/* Keep the photographic title in the gold/monochrome identity. */
.vs-photo-story h1 { color: var(--vs-gold); }

@media (min-width: 761px) {
  /* Explicitly restore the original desktop lightbox proportions. Later mobile
     experiments must not affect this layout. */
  body.vs-modal-open { overflow: hidden; }
  .vs-photo-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(18px, 3vw, 46px);
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(5px);
  }
  .admin-bar .vs-photo-modal-overlay { top: 32px; }
  .vs-photo-modal-overlay .vs-photo-modal-shell,
  .vs-photo-viewer-page .vs-photo-modal-shell {
    position: relative;
    width: min(96vw, 1510px);
    height: min(88svh, 930px);
    min-height: 590px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(355px, 410px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    background: #1b1b1b;
    box-shadow: 0 32px 110px rgba(0,0,0,.64);
  }
  .vs-photo-modal-overlay .vs-photo-stage,
  .vs-photo-viewer-page .vs-photo-stage {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    padding: clamp(16px, 2vw, 28px);
    overflow: hidden;
    background: #1c1c1c;
  }
  .vs-photo-modal-overlay .vs-photo-stage-figure,
  .vs-photo-viewer-page .vs-photo-stage-figure {
    width: 100%;
    height: 100%;
    transform: none !important;
  }
  .vs-photo-modal-overlay .vs-photo-stage-image,
  .vs-photo-viewer-page .vs-photo-stage-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: var(--vs-photo-radius);
  }
  .vs-photo-modal-overlay .vs-photo-panel,
  .vs-photo-viewer-page .vs-photo-panel {
    position: static;
    min-height: 0;
    margin: 0;
    overflow-y: auto;
    border-radius: 0;
    border-left: 1px solid rgba(255,255,255,.09);
    border-top: 0;
    background: #050505;
    box-shadow: none;
  }
  .vs-photo-modal-overlay .vs-photo-panel-inner,
  .vs-photo-viewer-page .vs-photo-panel-inner {
    padding: 24px 22px 30px;
    background: #050505;
  }
  .vs-photo-close { display: grid; }
  .vs-photo-mobile-back,
  .vs-photo-mobile-dock { display: none !important; }
}

@media (max-width: 760px) {
  :root { --vs-mobile-viewer-header: 68px; }
  body.admin-bar { --vs-mobile-viewer-header: 114px; }

  /* The real site header stays visible and is the only top chrome. */
  body.vs-photo-viewer-body .site-header,
  body.vs-modal-open .site-header {
    display: block !important;
    position: fixed;
    z-index: 6000;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(5,5,5,.98) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(16px);
  }
  body.admin-bar.vs-photo-viewer-body .site-header,
  body.admin-bar.vs-modal-open .site-header { top: 46px; }

  /* Keep the seam below the fixed header pure black. The mobile header is 68px
     high; matching the viewer offset prevents the page underneath from peeking
     through while a photograph is open. */
  body.vs-photo-viewer-body::before,
  body.vs-modal-open::before {
    content: "";
    position: fixed;
    z-index: 5500;
    left: 0;
    right: 0;
    top: var(--vs-mobile-viewer-header);
    height: 2px;
    background: #000;
    pointer-events: none;
  }

  body.vs-photo-viewer-body {
    margin: 0;
    padding-top: var(--vs-mobile-viewer-header);
    padding-bottom: 76px;
    overflow-x: hidden;
    background: #000;
  }
  body.vs-photo-viewer-body .site-footer { display: none; }
  body.vs-photo-viewer-body #wpadminbar { position: absolute; }

  .vs-photo-viewer-page {
    display: block;
    min-height: 100svh;
    padding: 0;
    background: #000;
  }

  /* An AJAX-opened photograph becomes an opaque full-width mobile page under
     the site header. Nothing from the gallery behind it can remain visible. */
  .vs-photo-modal-overlay {
    position: fixed;
    inset: var(--vs-mobile-viewer-header) 0 0 0;
    z-index: 5000;
    display: block;
    align-items: initial;
    justify-content: initial;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 0;
    background: #000 !important;
    backdrop-filter: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .admin-bar .vs-photo-modal-overlay { top: var(--vs-mobile-viewer-header); }

  .vs-photo-viewer-page .vs-photo-modal-shell,
  .vs-photo-modal-overlay .vs-photo-modal-shell {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: calc(100svh - var(--vs-mobile-viewer-header));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    animation: none;
    touch-action: pan-y;
  }

  /* The desktop close button disappears on mobile, but the custom, non-clickable
     Vicen profile strip remains part of the story content. */
  .vs-photo-close { display: none !important; }

  /* Small back button over the image; brand + menu remain in the real header. */
  .vs-photo-mobile-back-float {
    position: absolute;
    z-index: 16;
    top: 12px;
    left: 12px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    color: #fff;
    background: rgba(4,4,4,.62);
    backdrop-filter: blur(10px);
  }
  .vs-photo-mobile-back-float svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* One continuous scrolling surface. The stage is sticky and its *height*
     collapses as the page moves, so the photograph starts naturally and ends
     as a narrow panoramic strip while the text keeps travelling upward. */
  .vs-photo-stage {
    --vs-mobile-photo-h: 320px;
    position: sticky;
    top: var(--vs-mobile-viewer-header);
    z-index: 4;
    width: 100%;
    height: var(--vs-mobile-photo-h);
    min-height: 0 !important;
    max-height: none !important;
    display: block;
    overflow: hidden;
    padding: 0;
    background: #000;
    will-change: height;
  }
  .vs-photo-modal-overlay .vs-photo-stage { top: 0; }

  .vs-photo-stage-figure {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    transform: none !important;
    will-change: auto;
  }
  .vs-photo-stage-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    border-radius: 0 !important;
    box-shadow: none;
    transform: scale(var(--vs-mobile-photo-scale, 1));
    transform-origin: center center;
  }

  /* The information is not a second pane. It is simply the next part of the
     same document, immediately after the photo. */
  .vs-photo-panel,
  .vs-photo-modal-overlay .vs-photo-panel {
    position: relative;
    z-index: 3;
    min-height: 0;
    margin: 0;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
  }
  .vs-photo-panel-inner {
    padding: 13px 16px 102px;
    border: 0;
    background: #000;
    touch-action: pan-y;
  }
  .vs-photo-panel .vs-photo-author {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    min-height: 38px;
    pointer-events: none;
    user-select: none;
  }
  .vs-photo-panel .vs-photo-author-avatar,
  .vs-photo-panel .vs-photo-author-avatar img,
  .vs-photo-panel .vs-photo-author-avatar .vs-profile-placeholder {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .vs-photo-panel .vs-photo-author strong {
    color: #f5f2eb;
    font-size: .95rem;
    font-weight: 700;
  }
  .vs-photo-panel .vs-photo-author span {
    margin-top: 1px;
    color: #7c7973;
    font-size: .7rem;
  }
  .vs-photo-story,
  .vs-photo-description,
  .vs-photo-comments,
  .vs-photo-comments-list,
  .vs-photo-comment { touch-action: pan-y; }

  .vs-photo-story h1 {
    margin: 0 0 8px;
    color: var(--vs-gold);
    font-family: var(--vs-sans);
    font-size: clamp(1.35rem, 6vw, 1.82rem);
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.14;
  }
  .vs-photo-description {
    color: #e5e2db;
    font-size: clamp(.98rem, 4.25vw, 1.12rem);
    line-height: 1.48;
  }
  .vs-photo-description.is-collapsed {
    max-height: 5.95em;
    overflow: hidden;
  }
  .vs-photo-description.is-collapsed::after {
    background: linear-gradient(180deg, rgba(0,0,0,0), #000 90%);
  }
  .vs-photo-description.is-expanded { max-height: none; }
  .vs-expand-toggle {
    margin: 2px 0 0;
    color: #d6d2ca;
    font-size: .9rem;
  }
  .vs-expand-toggle:hover { color: var(--vs-gold); }

  .vs-photo-meta-line {
    margin-top: 8px;
    padding-top: 0;
    color: #77746e;
    font-size: .75rem;
  }
  .vs-photo-meta-line a { display: none; }

  /* Desktop's middle action row is replaced by the persistent lower dock. */
  .vs-photo-actions { display: none; }

  .vs-photo-comments-list { padding-top: 10px; }
  .vs-photo-comment { padding: 15px 0; }
  .vs-photo-comment.depth-2,
  .vs-photo-comment.depth-3,
  .vs-photo-comment.depth-4,
  .vs-photo-comment.depth-5 { margin-left: 18px; }
  .vs-photo-comment-avatar img { width: 40px; height: 40px; }
  .vs-photo-comment-head strong { font-size: .92rem; }
  .vs-photo-comment-head time { font-size: .72rem; }
  .vs-photo-comment-content { font-size: .98rem; line-height: 1.46; }
  .vs-photo-comment-composer {
    padding: 16px 0 20px;
    border-bottom-color: rgba(255,255,255,.08);
  }

  /* Always available: comment on the left, linked Displate/metal print on the
     right. The dock belongs to the viewport, not to a separate content pane. */
  .vs-photo-mobile-dock {
    position: fixed;
    z-index: 6200;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.09);
    background: rgba(5,5,5,.985);
    backdrop-filter: blur(16px);
  }
  .vs-photo-mobile-comment,
  .vs-photo-mobile-print {
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 23px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .015em;
  }
  .vs-photo-mobile-comment {
    border: 1px solid rgba(255,255,255,.11);
    color: #eee;
    background: #181818;
    cursor: pointer;
  }
  .vs-photo-mobile-comment b {
    color: #8f8f8f;
    font-size: .72rem;
    font-weight: 600;
  }
  .vs-photo-mobile-comment svg,
  .vs-photo-mobile-print svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .vs-photo-mobile-print {
    border: 1px solid rgba(196,162,96,.52);
    color: #e5cc92;
    background: rgba(196,162,96,.08);
  }
  .vs-photo-mobile-print.is-disabled {
    color: #666;
    border-color: rgba(255,255,255,.08);
    background: #111;
  }
}

/* ==========================================================================
   v1.3.8 — cleaner photograph metadata and uninterrupted reading
   Date sits directly beneath the chosen viewer identity. Permalink/tag-like
   metadata is hidden. Descriptions are always fully readable.
   ========================================================================== */

.vs-photo-author-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}
.vs-photo-author-date {
  display: block;
  margin-top: 4px;
  color: #78756e;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.25;
  white-space: nowrap;
}

/* Old permalink/date strip is intentionally retired in photograph viewers. */
.vs-photo-meta-line { display: none !important; }

/* Photograph descriptions are no longer collapsed on either viewport. */
.vs-photo-description,
.vs-photo-description.is-collapsed,
.vs-photo-description.is-expanded {
  max-height: none !important;
  overflow: visible !important;
}
.vs-photo-description::after,
.vs-photo-description.is-collapsed::after,
.vs-photo-description.is-expanded::after,
.vs-expand-toggle { display: none !important; }

@media (min-width: 761px) {
  /* Long stories/comments scroll inside the existing right-hand lightbox pane. */
  .vs-photo-modal-overlay .vs-photo-panel,
  .vs-photo-viewer-page .vs-photo-panel {
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(196,162,96,.55) transparent;
  }
  .vs-photo-modal-overlay .vs-photo-panel::-webkit-scrollbar,
  .vs-photo-viewer-page .vs-photo-panel::-webkit-scrollbar {
    width: 7px;
  }
  .vs-photo-modal-overlay .vs-photo-panel::-webkit-scrollbar-track,
  .vs-photo-viewer-page .vs-photo-panel::-webkit-scrollbar-track {
    background: transparent;
  }
  .vs-photo-modal-overlay .vs-photo-panel::-webkit-scrollbar-thumb,
  .vs-photo-viewer-page .vs-photo-panel::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid #050505;
    border-radius: 999px;
    background: rgba(196,162,96,.48);
  }
  .vs-photo-modal-overlay .vs-photo-panel::-webkit-scrollbar-thumb:hover,
  .vs-photo-viewer-page .vs-photo-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(196,162,96,.75);
  }
  .vs-photo-author { margin-bottom: 22px; }
}

@media (max-width: 760px) {
  /* Keep the current mobile photo-collapse motion untouched; only tighten the
     author/date block and let long copy extend naturally into the page scroll. */
  .vs-photo-panel .vs-photo-author {
    margin-bottom: 9px;
  }
  .vs-photo-panel .vs-photo-author-date {
    margin-top: 3px;
    color: #77736c;
    font-size: .69rem;
  }
  .vs-photo-description,
  .vs-photo-description.is-collapsed,
  .vs-photo-description.is-expanded {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   v1.3.11 — universal 500px-style galleries + stable mobile photo collapse
   ========================================================================== */

/* Every photographic catalogue now uses the same real masonry grid. CSS
   multi-columns could keep a small collection stacked in the first column;
   the JS-assisted grid below keeps a 500px-like mosaic even with 2–3 works. */
.vs-masonry,
.vs-category-grid,
.woocommerce ul.products,
.vs-home-products .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: 8px;
  gap: 12px !important;
  column-count: initial !important;
  column-gap: initial !important;
  align-items: start;
}

.vs-masonry .vs-photo-card,
.vs-category-grid .vs-photo-card,
.woocommerce ul.products li.product,
.vs-home-products .woocommerce ul.products li.product {
  display: block;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  break-inside: auto;
  align-self: start;
}

/* Titles always belong visually to the photograph and always stay centred,
   regardless of homepage, archive, dedicated gallery or WooCommerce. */
.vs-photo-card-meta,
.vs-masonry .vs-photo-card-meta,
.vs-category-grid .vs-photo-card-meta,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  text-align: center !important;
  justify-items: center !important;
}
.vs-photo-card-meta h3,
.vs-photo-card-meta h3 a,
.vs-masonry .vs-photo-card-meta h3,
.vs-category-grid .vs-photo-card-meta h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-caption-text {
  text-align: center !important;
}

@media (max-width: 1450px) {
  .vs-masonry,
  .vs-category-grid,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .vs-masonry,
  .vs-category-grid,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .vs-masonry,
  .vs-category-grid,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 6px;
    gap: 9px !important;
  }

  .vs-masonry .vs-photo-card,
  .vs-category-grid .vs-photo-card,
  .woocommerce ul.products li.product {
    margin: 0 !important;
  }

  /* The stage and panel jointly keep a constant amount of document space while
     the image collapses. This avoids the old scroll feedback that could stop a
     long story before its last paragraph. */
  .vs-photo-modal-shell {
    --vs-mobile-photo-start-h: 320px;
    --vs-mobile-photo-h: 320px;
  }
  .vs-photo-stage {
    height: var(--vs-mobile-photo-h) !important;
  }
  .vs-photo-panel,
  .vs-photo-modal-overlay .vs-photo-panel {
    margin-top: calc(var(--vs-mobile-photo-start-h) - var(--vs-mobile-photo-h)) !important;
  }

  /* The whole story remains available. Once the image has become the narrow
     panoramic strip it stays there while all remaining text/comments continue
     scrolling underneath it. */
  .vs-photo-description,
  .vs-photo-description.is-collapsed,
  .vs-photo-description.is-expanded {
    max-height: none !important;
    overflow: visible !important;
  }
  .vs-photo-description.is-collapsed::after,
  .vs-expand-toggle {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .vs-masonry,
  .vs-category-grid,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    gap: 7px !important;
  }
}

/* WooCommerce still ships legacy float/table clearfix rules; neutralise them so
   its catalogue participates in the same masonry grid as photographic posts. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; content: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  clear: none !important;
  width: auto !important;
}

/* ==========================================================================
   v1.3.12 — airier 500px-style mosaic + centred captions + gentle zoom
   ========================================================================== */

/* Give every photographic catalogue breathing room between cards and use a
   denser six-column desktop rhythm. Natural image ratios are preserved, so
   portrait and landscape work interlock in the same mosaic. */
.vs-masonry,
.vs-category-grid,
.woocommerce ul.products,
.vs-home-products .woocommerce ul.products {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-flow: dense;
  column-gap: 18px !important;
  row-gap: 18px !important;
}

/* Captions are deliberately centred everywhere, including the clickable title
   itself (older rules on anchors could otherwise make the text look left-set). */
.vs-photo-card-meta,
.vs-masonry .vs-photo-card-meta,
.vs-category-grid .vs-photo-card-meta {
  text-align: center !important;
  justify-items: center !important;
  align-items: center !important;
}
.vs-photo-card-meta h3,
.vs-photo-card-meta h3 a,
.vs-masonry .vs-photo-card-meta h3,
.vs-masonry .vs-photo-card-meta h3 a,
.vs-category-grid .vs-photo-card-meta h3,
.vs-category-grid .vs-photo-card-meta h3 a,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
}
.vs-photo-card-meta,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  min-height: 54px;
  padding: 10px 12px 11px !important;
}

/* Small, polished zoom on pointer hover and touch press. The image remains
   clipped by the rounded card so the card itself never changes size. */
.vs-photo-card-image img,
.woocommerce ul.products li.product a img {
  transition: transform .24s cubic-bezier(.2,.7,.2,1) !important;
  transform-origin: center center;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .vs-photo-card:hover .vs-photo-card-image img,
  .woocommerce ul.products li.product:hover a img {
    transform: scale(1.025) !important;
  }
}
.vs-photo-card.is-pressing .vs-photo-card-image img,
.vs-photo-card:active .vs-photo-card-image img,
.woocommerce ul.products li.product.is-pressing a img,
.woocommerce ul.products li.product:active a img {
  transform: scale(1.03) !important;
}

@media (max-width: 1499px) {
  .vs-masonry,
  .vs-category-grid,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
  }
}

@media (max-width: 1199px) {
  .vs-masonry,
  .vs-category-grid,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 14px !important;
  }
}

@media (max-width: 900px) {
  .vs-masonry,
  .vs-category-grid,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
}

@media (max-width: 760px) {
  .vs-masonry,
  .vs-category-grid,
  .woocommerce ul.products,
  .vs-home-products .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
  }
  .vs-photo-card-meta,
  .vs-masonry .vs-photo-card-meta,
  .vs-category-grid .vs-photo-card-meta,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 48px;
    padding: 8px 8px 9px !important;
  }
  .vs-photo-card-meta h3,
  .vs-photo-card-meta h3 a,
  .vs-masonry .vs-photo-card-meta h3,
  .vs-masonry .vs-photo-card-meta h3 a,
  .vs-category-grid .vs-photo-card-meta h3,
  .vs-category-grid .vs-photo-card-meta h3 a,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: .84rem !important;
    line-height: 1.18 !important;
  }
}

/* ========================================================================== 
   v1.3.14 — robust 500px-style mobile collapse for landscape + portrait
   ========================================================================== */
@media (max-width: 760px) {
  /* Keep a constant document footprint: the sticky stage itself occupies only
     its final panoramic height, while a fixed spacer before the story accounts
     for the photograph's initial extra height. The visible figure shrinks over
     that spacer, so long stories/comments remain fully scrollable. */
  .vs-photo-modal-shell {
    --vs-mobile-photo-start-h: 320px;
    --vs-mobile-photo-min-h: 138px;
    --vs-mobile-photo-h: 320px;
    --vs-mobile-collapse-range: 182px;
  }

  .vs-photo-stage,
  .vs-photo-modal-overlay .vs-photo-stage {
    position: sticky !important;
    height: var(--vs-mobile-photo-min-h) !important;
    min-height: var(--vs-mobile-photo-min-h) !important;
    max-height: var(--vs-mobile-photo-min-h) !important;
    overflow: visible !important;
    background: #000 !important;
  }
  .vs-photo-viewer-page .vs-photo-stage { top: var(--vs-mobile-viewer-header) !important; }
  .vs-photo-modal-overlay .vs-photo-stage { top: 0 !important; }

  .vs-photo-stage-figure {
    position: absolute !important;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    width: 100% !important;
    height: var(--vs-mobile-photo-h) !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000;
    will-change: height;
  }

  .vs-photo-stage-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(var(--vs-mobile-photo-scale, 1)) !important;
    transform-origin: center center !important;
  }

  /* Fixed, not dynamic: at scroll 0 the story starts exactly beneath the full
     image; after scrolling the collapse range it reaches the panoramic strip
     and then continues travelling normally underneath that fixed strip. */
  .vs-photo-panel,
  .vs-photo-modal-overlay .vs-photo-panel {
    margin-top: var(--vs-mobile-collapse-range) !important;
    overflow: visible !important;
  }

  .vs-photo-panel-inner {
    /* Keep enough room above the fixed bottom action dock, without limiting
       the amount of story or comments that can be reached. */
    padding-bottom: 104px !important;
  }
}


/* ========================================================================== 
   v1.3.15 — simple natural mobile photo scroll
   The photograph is part of the page again: no sticky split, no scripted
   collapse. Landscape and portrait images simply travel upward with the story.
   ========================================================================== */
@media (max-width: 760px) {
  .vs-photo-modal-shell {
    --vs-mobile-photo-start-h: auto !important;
    --vs-mobile-photo-min-h: auto !important;
    --vs-mobile-photo-h: auto !important;
    --vs-mobile-collapse-range: 0px !important;
  }

  .vs-photo-stage,
  .vs-photo-viewer-page .vs-photo-stage,
  .vs-photo-modal-overlay .vs-photo-stage {
    position: relative !important;
    top: auto !important;
    z-index: 4;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    will-change: auto !important;
  }

  .vs-photo-stage-figure,
  .vs-photo-modal-overlay .vs-photo-stage-figure,
  .vs-photo-viewer-page .vs-photo-stage-figure {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
    will-change: auto !important;
  }

  .vs-photo-stage-image,
  .vs-photo-modal-overlay .vs-photo-stage-image,
  .vs-photo-viewer-page .vs-photo-stage-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .vs-photo-panel,
  .vs-photo-modal-overlay .vs-photo-panel,
  .vs-photo-viewer-page .vs-photo-panel {
    margin-top: 0 !important;
    overflow: visible !important;
  }

  .vs-photo-panel-inner {
    padding-top: 10px !important;
  }
}


/* ========================================================================== 
   v1.3.17 — progressive mobile photo collapse, landscape + portrait
   The photo and story are one scroll surface. Every orientation starts at an
   appropriate height, shrinks while the story rises, then remains as the same
   panoramic strip while the rest of the text/comments continue scrolling.
   Desktop is intentionally untouched.
   ========================================================================== */
@media (max-width: 760px) {
  .vs-photo-modal-shell,
  .vs-photo-viewer-page .vs-photo-modal-shell,
  .vs-photo-modal-overlay .vs-photo-modal-shell {
    --vs-mobile-photo-start-h: 360px;
    --vs-mobile-photo-min-h: 136px;
    --vs-mobile-photo-h: var(--vs-mobile-photo-start-h);
    --vs-mobile-collapse-range: 240px;
    --vs-mobile-photo-scale: 1;
    /* Gives short captions enough travel to complete the collapse without
       imposing any maximum on long stories or comments. */
    min-height: calc(100svh - var(--vs-mobile-viewer-header) + var(--vs-mobile-collapse-range)) !important;
  }

  .vs-photo-stage,
  .vs-photo-viewer-page .vs-photo-stage,
  .vs-photo-modal-overlay .vs-photo-stage {
    position: sticky !important;
    z-index: 5 !important;
    width: 100% !important;
    height: var(--vs-mobile-photo-h) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    will-change: height !important;
  }

  .vs-photo-viewer-page .vs-photo-stage {
    top: var(--vs-mobile-viewer-header) !important;
  }

  .vs-photo-modal-overlay .vs-photo-stage {
    top: 0 !important;
  }

  .vs-photo-stage-figure,
  .vs-photo-viewer-page .vs-photo-stage-figure,
  .vs-photo-modal-overlay .vs-photo-stage-figure {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
    will-change: auto !important;
  }

  .vs-photo-stage-image,
  .vs-photo-viewer-page .vs-photo-stage-image,
  .vs-photo-modal-overlay .vs-photo-stage-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(var(--vs-mobile-photo-scale)) !important;
    transform-origin: center center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    will-change: transform !important;
  }

  /* The story is not a second scrolling pane. It follows immediately after the
     live-height photo; as that height shrinks, the story naturally rises. */
  .vs-photo-panel,
  .vs-photo-viewer-page .vs-photo-panel,
  .vs-photo-modal-overlay .vs-photo-panel {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
    background: #000 !important;
  }

  .vs-photo-panel-inner {
    padding-top: 10px !important;
    padding-bottom: 104px !important;
  }
}


/* ========================================================================== 
   v1.3.18 — feedback-free 500px-style mobile viewer
   The layout keeps a constant photo placeholder while a fixed visual layer
   shrinks. This makes portrait and landscape photographs behave consistently:
   the story rises with the lower edge of the image, then continues beneath a
   persistent panoramic strip without ever shortening the document.
   ========================================================================== */
@media (max-width: 760px) {
  .vs-photo-modal-shell,
  .vs-photo-viewer-page .vs-photo-modal-shell,
  .vs-photo-modal-overlay .vs-photo-modal-shell {
    --vs-mobile-photo-start-h: 360px;
    --vs-mobile-photo-min-h: 136px;
    --vs-mobile-photo-h: var(--vs-mobile-photo-start-h);
    --vs-mobile-photo-scale: 1;
    min-height: calc(100svh - var(--vs-mobile-viewer-header)) !important;
    overflow: visible !important;
  }

  /* Pure layout placeholder. Its height never changes while scrolling. */
  .vs-photo-stage,
  .vs-photo-viewer-page .vs-photo-stage,
  .vs-photo-modal-overlay .vs-photo-stage {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    height: var(--vs-mobile-photo-start-h) !important;
    min-height: var(--vs-mobile-photo-start-h) !important;
    max-height: var(--vs-mobile-photo-start-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #000 !important;
    will-change: auto !important;
  }

  /* The visible photograph is independent of document geometry. */
  .vs-photo-stage-figure,
  .vs-photo-viewer-page .vs-photo-stage-figure,
  .vs-photo-modal-overlay .vs-photo-stage-figure {
    position: fixed !important;
    z-index: 5300 !important;
    top: var(--vs-mobile-viewer-header) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--vs-mobile-photo-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
    will-change: height !important;
    pointer-events: none !important;
  }

  .vs-photo-stage-image,
  .vs-photo-viewer-page .vs-photo-stage-image,
  .vs-photo-modal-overlay .vs-photo-stage-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(var(--vs-mobile-photo-scale)) !important;
    transform-origin: center center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    will-change: transform !important;
  }

  /* The story simply follows the constant placeholder. It can be arbitrarily
     long; after the collapse it scrolls under the fixed panoramic image. */
  .vs-photo-panel,
  .vs-photo-viewer-page .vs-photo-panel,
  .vs-photo-modal-overlay .vs-photo-panel {
    position: relative !important;
    z-index: 3 !important;
    margin: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
    background: #000 !important;
  }
  .vs-photo-panel-inner {
    padding-top: 10px !important;
    padding-bottom: 112px !important;
  }

  /* Keep navigation above the fixed photograph. */
  .vs-photo-mobile-back-float {
    position: fixed !important;
    z-index: 6100 !important;
    top: calc(var(--vs-mobile-viewer-header) + 12px) !important;
    left: 12px !important;
  }
}


/* ========================================================================== 
   v1.3.19 — reliable mobile collapsing photograph
   Keep the stage in normal document geometry and use sticky + clipping only.
   No element changes its layout height while scrolling, so portrait and
   landscape images behave the same and the full story remains reachable.
   ========================================================================== */
@media (max-width: 760px) {
  .vs-photo-modal-shell,
  .vs-photo-viewer-page .vs-photo-modal-shell,
  .vs-photo-modal-overlay .vs-photo-modal-shell {
    --vs-mobile-photo-start-h: 320px;
    --vs-mobile-photo-min-h: 136px;
    --vs-mobile-photo-clip: 0px;
    --vs-mobile-photo-shift: 0px;
    overflow: visible !important;
    min-height: calc(100svh - var(--vs-mobile-viewer-header)) !important;
  }

  /* The stage keeps its initial height in the document. It becomes sticky,
     while clip-path reveals progressively less of it. The panel can therefore
     rise beneath it without changing scroll geometry. */
  .vs-photo-stage,
  .vs-photo-viewer-page .vs-photo-stage,
  .vs-photo-modal-overlay .vs-photo-stage {
    position: sticky !important;
    top: var(--vs-mobile-viewer-header) !important;
    z-index: 2 !important;
    width: 100% !important;
    height: var(--vs-mobile-photo-start-h) !important;
    min-height: var(--vs-mobile-photo-start-h) !important;
    max-height: var(--vs-mobile-photo-start-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    clip-path: inset(0 0 var(--vs-mobile-photo-clip) 0) !important;
    -webkit-clip-path: inset(0 0 var(--vs-mobile-photo-clip) 0) !important;
    pointer-events: none !important;
    will-change: clip-path !important;
  }

  /* Ajax viewer already begins below the fixed site header. */
  .vs-photo-modal-overlay .vs-photo-stage {
    top: 0 !important;
  }

  .vs-photo-stage-figure,
  .vs-photo-viewer-page .vs-photo-stage-figure,
  .vs-photo-modal-overlay .vs-photo-stage-figure {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .vs-photo-stage-image,
  .vs-photo-viewer-page .vs-photo-stage-image,
  .vs-photo-modal-overlay .vs-photo-stage-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: translate3d(0, var(--vs-mobile-photo-shift), 0) scale(1.005) !important;
    transform-origin: center center !important;
    will-change: transform !important;
  }

  /* The story is a normal part of the page and deliberately sits above the
     clipped-away part of the sticky stage. This keeps swiping natural from
     both the image and the text. */
  .vs-photo-panel,
  .vs-photo-viewer-page .vs-photo-panel,
  .vs-photo-modal-overlay .vs-photo-panel {
    position: relative !important;
    z-index: 3 !important;
    margin-top: calc(-1 * (var(--vs-mobile-photo-start-h) - var(--vs-mobile-photo-min-h))) !important;
    padding-top: calc(var(--vs-mobile-photo-start-h) - var(--vs-mobile-photo-min-h)) !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
    background: transparent !important;
  }

  .vs-photo-panel-inner {
    position: relative !important;
    z-index: 3 !important;
    background: #000 !important;
    touch-action: pan-y !important;
  }
}


/* ==========================================================================\n   v1.3.20 — By Vicen identity shared by header and photograph viewer\n   ========================================================================== */
.site-identity-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.site-identity-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}
.site-identity-avatar img,
.site-identity-avatar .vs-profile-placeholder {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
.site-identity-avatar .vs-profile-placeholder {
  display: grid;
  place-items: center;
  color: #16120b;
  background: var(--vs-gold);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1;
}
.site-identity-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  line-height: 1.1;
}
.site-identity-copy strong {
  color: var(--vs-gold);
  font-family: var(--vs-serif);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: .055em;
  text-transform: none;
  white-space: nowrap;
}
.site-identity-copy > span {
  color: rgba(255,255,255,.68);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vs-photo-author-subtitle {
  display: block;
  margin-top: 4px;
  color: #8f8b83;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.25;
  white-space: nowrap;
}
.vs-photo-author-date { display: none !important; }

@media (max-width: 760px) {
  .header-inner { min-height: 76px; }
  .site-identity-link { gap: 10px; }
  .site-identity-avatar,
  .site-identity-avatar img,
  .site-identity-avatar .vs-profile-placeholder {
    width: 40px;
    height: 40px;
  }
  .site-identity-avatar { flex-basis: 40px; }
  .site-identity-copy strong {
    font-size: .98rem;
    letter-spacing: .045em;
  }
  .site-identity-copy > span {
    font-size: .49rem;
    letter-spacing: .13em;
  }
  .vs-photo-author-subtitle {
    margin-top: 3px;
    font-size: .72rem;
  }
}


/* ==========================================================================
   v1.3.21 — Traditional article cinematic hero
   Featured image becomes a dark panoramic background behind category + title.
   ========================================================================== */
.vs-classic-article {
  padding: 0 0 120px;
}
.vs-classic-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 48vw, 660px);
  overflow: hidden;
  background: linear-gradient(145deg, #090909, #030303 70%);
  border-bottom: 1px solid var(--vs-line-soft);
}
.vs-classic-hero-media {
  position: absolute;
  inset: -10% 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.vs-classic-hero-image {
  width: 100%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  border-radius: 0 !important;
  transform: translate3d(0, var(--vs-classic-parallax-y, 0px), 0) scale(1.04);
  transform-origin: center center;
  will-change: transform;
}
.vs-classic-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,.76) 100%),
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
}
.vs-classic-head {
  position: relative;
  z-index: 2;
  width: min(calc(100% - (var(--vs-pad) * 2)), 1180px);
  margin-inline: auto;
  padding-top: clamp(125px, 15vw, 210px);
  padding-bottom: clamp(48px, 6vw, 82px);
}
.vs-classic-taxonomy {
  margin-bottom: 15px;
  color: var(--vs-gold);
  font-size: .68rem;
  letter-spacing: .21em;
}
.vs-classic-head h1 {
  max-width: 1040px;
  margin: 0 0 24px;
  color: var(--vs-paper);
  font-family: var(--vs-serif);
  font-size: clamp(2.7rem, 4.6vw, 4.9rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .96;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0,0,0,.48);
}
.vs-classic-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: rgba(255,255,255,.68);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vs-classic-content {
  padding-top: clamp(46px, 5vw, 72px);
}

@media (max-width: 760px) {
  .vs-classic-hero {
    min-height: clamp(390px, 112vw, 560px);
  }
  .vs-classic-hero-media {
    inset: -8% 0;
  }
  .vs-classic-hero-image {
    height: 116%;
    transform: translate3d(0, var(--vs-classic-parallax-y, 0px), 0) scale(1.035);
  }
  .vs-classic-hero-shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,.82) 100%),
      linear-gradient(90deg, rgba(0,0,0,.36), rgba(0,0,0,.12));
  }
  .vs-classic-head {
    padding-top: 120px;
    padding-bottom: 38px;
  }
  .vs-classic-taxonomy {
    margin-bottom: 12px;
    font-size: .6rem;
  }
  .vs-classic-head h1 {
    max-width: 92%;
    margin-bottom: 18px;
    font-size: clamp(2.25rem, 10.5vw, 3.35rem);
    line-height: .98;
  }
  .vs-classic-byline {
    font-size: .58rem;
  }
  .vs-classic-content {
    padding-top: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs-classic-hero-image {
    transform: scale(1.04) !important;
  }
}

/* ========================================================================== 
   v1.3.22 — tighter editorial spacing + consistent desktop photo viewer
   ========================================================================== */

/* Archive/category headers keep the editorial scale but use roughly half of
   the previous top air, so the collection begins noticeably sooner. */
.vs-archive-head,
.vs-gallery-head {
  padding-top: clamp(58px, 6vw, 90px);
  padding-bottom: clamp(34px, 4vw, 56px);
}
.vs-archive-title {
  margin: 10px 0 0;
  font-family: var(--vs-serif);
  font-size: clamp(3.3rem, 7vw, 8rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .84;
  text-transform: uppercase;
}

/* Traditional/blog article hero: less empty space above the taxonomy/title
   and a lower, more panoramic featured-image band. */
.vs-classic-hero {
  min-height: clamp(340px, 30vw, 440px);
}
.vs-classic-hero-media {
  inset: -14% 0;
}
.vs-classic-hero-image {
  height: 128%;
}
.vs-classic-head {
  padding-top: clamp(62px, 7vw, 100px);
  padding-bottom: clamp(34px, 4vw, 54px);
}

/* A direct photo permalink on desktop must look exactly like the AJAX viewer
   opened from the homepage. Hide the normal site header only for the desktop
   photo-viewer page and center the same floating shell in the viewport. */
@media (min-width: 761px) {
  body.vs-photo-viewer-body .site-header {
    display: none !important;
  }
  body.vs-photo-viewer-body .vs-photo-viewer-page {
    min-height: 100svh;
    padding-top: clamp(18px, 2.4vw, 38px);
    padding-bottom: clamp(18px, 2.4vw, 38px);
  }
  body.admin-bar.vs-photo-viewer-body .vs-photo-viewer-page {
    min-height: calc(100svh - 32px);
  }
}

@media (max-width: 760px) {
  .vs-archive-head,
  .vs-gallery-head {
    padding-top: 44px;
    padding-bottom: 34px;
  }
  .vs-archive-title {
    font-size: clamp(2.7rem, 14vw, 4.5rem);
    line-height: .9;
  }
  .vs-classic-hero {
    min-height: clamp(330px, 92vw, 430px);
  }
  .vs-classic-hero-media {
    inset: -12% 0;
  }
  .vs-classic-hero-image {
    height: 124%;
  }
  .vs-classic-head {
    padding-top: 54px;
    padding-bottom: 30px;
  }
}

/* ==========================================================================
   v1.3.24 — footer social links visibility fix
   ========================================================================== */

/* Keep the three photography destinations visible and aligned on the same
   baseline as copyright/legal links on desktop. */
.footer-bottom {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(300px, 1fr);
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
}

.footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 150px;
}

.footer-social {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196,162,96,.64);
  border-radius: 999px;
  color: var(--vs-gold);
  background: rgba(196,162,96,.045);
  text-decoration: none;
  line-height: 1;
  opacity: 1;
  visibility: visible;
  transition: transform .24s ease, border-color .24s ease, color .24s ease, background-color .24s ease;
}

.footer-social svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
  color: inherit;
}

.footer-social svg rect,
.footer-social svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.footer-social svg .footer-social-dot {
  fill: currentColor;
  stroke: none;
}

.footer-social-pinterest-mark text {
  fill: currentColor;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 700;
}

.footer-social-wordmark {
  width: 27px !important;
  height: 16px !important;
}

.footer-social-wordmark text {
  fill: currentColor;
  font-family: var(--vs-sans);
  font-size: 10.3px;
  font-weight: 800;
  letter-spacing: -.65px;
}

.footer-social:hover,
.footer-social:focus-visible {
  color: #080808;
  background: var(--vs-gold);
  border-color: var(--vs-gold);
  transform: translateY(-2px);
}

.footer-social:not(a) {
  opacity: .52;
  cursor: default;
}

.footer-social:not(a):hover {
  color: var(--vs-gold);
  background: rgba(196,162,96,.045);
  border-color: rgba(196,162,96,.64);
  transform: none;
}

.footer-menu {
  justify-self: end;
}

.footer-menu ul {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .footer-note { order: 1; }

  .footer-socials {
    order: 2;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 12px;
  }

  .footer-menu {
    order: 3;
    width: 100%;
  }

  .footer-menu ul {
    justify-content: flex-start;
    gap: 13px 20px;
  }
}


/* ========================================================================== 
   v1.3.25 — refined footer social sizing and mobile centering
   ========================================================================== */

/* Slightly smaller circles on desktop, with the marks proportionally a touch
   larger so they remain crisp and legible. */
@media (min-width: 761px) {
  .footer-socials {
    gap: 10px;
  }

  .footer-social {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .footer-social svg {
    width: 19px;
    height: 19px;
  }

  .footer-social-wordmark {
    width: 31px !important;
    height: 17px !important;
  }

  .footer-social-wordmark text {
    font-size: 11.6px;
    font-weight: 800;
    letter-spacing: -.7px;
  }
}

/* On mobile the social row sits visually centred and gets a little more room
   so the 500px wordmark is easy to read at a glance. */
@media (max-width: 760px) {
  .footer-socials {
    justify-content: center;
    gap: 14px;
    align-self: stretch;
  }

  .footer-social {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
  }

  .footer-social svg {
    width: 20px;
    height: 20px;
  }

  .footer-social-wordmark {
    width: 34px !important;
    height: 18px !important;
  }

  .footer-social-wordmark text {
    font-size: 12.4px;
    font-weight: 850;
    letter-spacing: -.75px;
  }
}


/* ==========================================================================
   v1.3.27 — Pinterest replaces Displate in footer social links
   ========================================================================== */
.footer-social-pinterest-mark {
  width: 20px !important;
  height: 20px !important;
}
.footer-social-pinterest-mark text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .footer-social-pinterest-mark {
    width: 21px !important;
    height: 21px !important;
  }
  .footer-social-pinterest-mark text {
    font-size: 19px;
  }
}

/* ==========================================================================
   v1.3.29 — image protection, Polylang selector and multilingual UI
   ========================================================================== */

/* Keep normal right-click behaviour for text/links, but suppress long-press
   image callouts and native dragging on photographic assets. JavaScript also
   cancels the image contextmenu event. */
img,
.vs-hero-media,
.vs-classic-hero-media,
.vs-photo-card-image,
.vs-photo-stage,
.vs-single-media,
.woocommerce-product-gallery,
.wp-block-image,
.wp-block-gallery {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 0;
}

.footer-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.46);
}

.footer-language-label {
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-language-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.footer-language-select-wrap::after {
  content: '⌄';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-56%);
  color: var(--vs-gold);
  font-size: .8rem;
  line-height: 1;
  pointer-events: none;
}

.footer-language-select {
  width: auto !important;
  min-width: 132px;
  max-width: 190px;
  height: 38px;
  margin: 0;
  padding: 0 31px 0 13px !important;
  border: 1px solid rgba(196,162,96,.48) !important;
  border-radius: 999px !important;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(196,162,96,.035) !important;
  color: rgba(255,255,255,.76) !important;
  font-family: var(--vs-sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1;
  cursor: pointer;
  transition: border-color .22s ease, color .22s ease, background-color .22s ease;
}

.footer-language-select:hover,
.footer-language-select:focus-visible {
  border-color: var(--vs-gold) !important;
  color: var(--vs-paper) !important;
  background: rgba(196,162,96,.075) !important;
}

.footer-language-select option {
  color: #ece9e1;
  background: #0b0b0b;
}

@media (max-width: 760px) {
  .footer-bottom {
    align-items: center;
  }

  .footer-note {
    width: 100%;
    text-align: center;
  }

  .footer-center {
    order: 2;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
  }

  .footer-socials {
    width: auto;
    align-self: center;
  }

  .footer-language-switcher {
    width: 100%;
    justify-content: center;
  }

  .footer-language-label {
    display: none;
  }

  .footer-language-select {
    min-width: 158px;
    height: 41px;
    text-align: center;
    text-align-last: center;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .footer-menu {
    width: 100%;
    text-align: center;
  }

  .footer-menu ul {
    justify-content: center;
  }
}

/* ========================================================================== 
   v1.3.30 — desktop language switcher, editorial category heroes, read time
   ========================================================================== */

/* On desktop the Polylang selector lives beside the primary navigation. */
.header-language-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 2px;
  padding-left: 22px;
}
.header-language-switcher::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 24px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.14);
}
.header-language-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.header-language-select-wrap::after {
  content: '⌄';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-57%);
  color: var(--vs-gold);
  font-size: .72rem;
  line-height: 1;
  pointer-events: none;
}
.header-language-select {
  width: auto;
  min-width: 116px;
  max-width: 158px;
  height: 34px;
  margin: 0;
  padding: 0 28px 0 12px;
  border: 1px solid rgba(196,162,96,.32);
  border-radius: 999px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.018);
  color: rgba(255,255,255,.70);
  font-family: var(--vs-sans);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.header-language-select:hover,
.header-language-select:focus-visible {
  border-color: rgba(196,162,96,.72);
  background: rgba(196,162,96,.06);
  color: var(--vs-paper);
}
.header-language-select option {
  color: #ece9e1;
  background: #0b0b0b;
}

/* The footer keeps the language chooser only on mobile. */
@media (min-width: 761px) {
  .footer-language-switcher { display: none !important; }
}

/* Category archives use their own panoramic editorial hero instead of the
   oversized generic "Category:" WordPress archive heading. */
.vs-category-archive-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(330px, 29vw, 430px);
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 34%, rgba(196,162,96,.10), transparent 32%),
    linear-gradient(145deg, #0b0b0b, #030303 72%);
  border-bottom: 1px solid var(--vs-line-soft);
}
.vs-category-archive-hero-media {
  position: absolute;
  inset: -14% 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.vs-category-archive-hero-image {
  width: 100%;
  height: 128%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  border-radius: 0 !important;
  transform: translate3d(0, var(--vs-classic-parallax-y, 0px), 0) scale(1.04);
  transform-origin: center center;
  will-change: transform;
}
.vs-category-archive-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.29) 34%, rgba(0,0,0,.80) 100%),
    linear-gradient(90deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.16) 64%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
}
.vs-category-archive-head {
  position: relative;
  z-index: 2;
  width: min(calc(100% - (var(--vs-pad) * 2)), 1180px);
  margin-inline: auto;
  padding-top: clamp(58px, 7vw, 96px);
  padding-bottom: clamp(34px, 4.2vw, 56px);
}
.vs-category-archive-name {
  margin: 0 0 14px;
  color: var(--vs-gold);
  font-size: .68rem;
  letter-spacing: .21em;
}
.vs-category-archive-head h1 {
  max-width: 1080px;
  margin: 0 0 22px;
  color: var(--vs-paper);
  font-family: var(--vs-serif);
  font-size: clamp(2.55rem, 4.45vw, 4.75rem);
  font-weight: 400;
  letter-spacing: -.044em;
  line-height: .97;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.48);
}
.vs-category-archive-meta {
  color: rgba(255,255,255,.67);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.vs-category-archive .vs-archive-results .vs-masonry {
  padding-top: clamp(18px, 2vw, 30px);
}

@media (max-width: 760px) {
  .header-language-switcher { display: none !important; }

  .vs-category-archive-hero {
    min-height: clamp(325px, 88vw, 410px);
  }
  .vs-category-archive-hero-media {
    inset: -12% 0;
  }
  .vs-category-archive-hero-image {
    height: 124%;
    transform: translate3d(0, var(--vs-classic-parallax-y, 0px), 0) scale(1.035);
  }
  .vs-category-archive-hero-shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.26) 34%, rgba(0,0,0,.84) 100%),
      linear-gradient(90deg, rgba(0,0,0,.40), rgba(0,0,0,.12));
  }
  .vs-category-archive-head {
    padding-top: 52px;
    padding-bottom: 30px;
  }
  .vs-category-archive-name {
    margin-bottom: 11px;
    font-size: .6rem;
  }
  .vs-category-archive-head h1 {
    max-width: 94%;
    margin-bottom: 17px;
    font-size: clamp(2.05rem, 9.5vw, 3.05rem);
    line-height: 1;
  }
  .vs-category-archive-meta {
    font-size: .58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs-category-archive-hero-image {
    transform: scale(1.04) !important;
  }
}

/* ==========================================================================
   v1.3.31 — category hero parity + German two-line homepage title
   ========================================================================== */

/* Category archives now use the same cinematic proportions, media treatment,
   typography and horizontal measure as a traditional article hero. The
   category copy starts from the same upper editorial position even when the
   category description is short. */
.vs-category-archive-hero {
  align-items: flex-start;
  min-height: clamp(340px, 30vw, 440px);
  background: linear-gradient(145deg, #090909, #030303 70%);
}
.vs-category-archive-hero-media {
  inset: -14% 0;
}
.vs-category-archive-hero-image {
  height: 128%;
  transform: translate3d(0, var(--vs-classic-parallax-y, 0px), 0) scale(1.04);
}
.vs-category-archive-hero-shade {
  background:
    linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,.76) 100%),
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.28) 100%);
}
.vs-category-archive-head {
  width: min(calc(100% - (var(--vs-pad) * 2)), 1180px);
  padding-top: clamp(62px, 7vw, 100px);
  padding-bottom: clamp(34px, 4vw, 54px);
}
.vs-category-archive-name {
  margin-bottom: 15px;
  font-size: .68rem;
  letter-spacing: .21em;
}
.vs-category-archive-head h1 {
  max-width: 1040px;
  margin: 0 0 24px;
  font-size: clamp(2.7rem, 4.6vw, 4.9rem);
  letter-spacing: -.045em;
  line-height: .96;
  text-wrap: balance;
}
.vs-category-archive-meta {
  font-size: .66rem;
  letter-spacing: .08em;
}

/* German words are longer. Keep the visual weight of the hero while making
   "MEER. LICHT." stay together so the title resolves to two lines, like the
   other language versions. */
html[lang^="de"] .vs-hero h1 {
  max-width: 1120px;
  font-size: clamp(4rem, 8vw, 8.8rem);
  line-height: .8;
}

@media (max-width: 760px) {
  .vs-category-archive-hero {
    align-items: flex-start;
    min-height: clamp(330px, 92vw, 430px);
  }
  .vs-category-archive-hero-media {
    inset: -12% 0;
  }
  .vs-category-archive-hero-image {
    height: 124%;
    transform: translate3d(0, var(--vs-classic-parallax-y, 0px), 0) scale(1.035);
  }
  .vs-category-archive-hero-shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,.82) 100%),
      linear-gradient(90deg, rgba(0,0,0,.36), rgba(0,0,0,.12));
  }
  .vs-category-archive-head {
    padding-top: 54px;
    padding-bottom: 30px;
  }
  .vs-category-archive-name {
    margin-bottom: 12px;
    font-size: .6rem;
  }
  .vs-category-archive-head h1 {
    max-width: 92%;
    margin-bottom: 18px;
    font-size: clamp(2.25rem, 10.5vw, 3.35rem);
    line-height: .98;
  }
  .vs-category-archive-meta {
    font-size: .58rem;
  }
  html[lang^="de"] .vs-hero h1 {
    max-width: 100%;
    font-size: clamp(2.75rem, 11vw, 4.7rem);
    line-height: .82;
  }
}

/* ==========================================================================
   v1.3.32 — elegant hierarchical primary navigation
   Desktop: refined dropdown panels. Mobile/tablet: accessible accordion menus.
   ========================================================================== */

/* WordPress adds .menu-item-has-children and .sub-menu automatically when a
   menu item has descendants, so this works with categories, pages, custom
   links and any hierarchy created from Appearance > Menus or the Bridge. */
.main-navigation .menu-item-has-children {
  position: relative;
}

.main-navigation .menu-item-has-children > a {
  padding-right: 20px;
}

.vs-submenu-toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -8px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.58);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s ease, background .2s ease;
}

.vs-submenu-toggle:hover,
.vs-submenu-toggle:focus-visible {
  color: var(--vs-gold);
  background: rgba(196,162,96,.08);
  outline: none;
}

.vs-submenu-toggle::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s ease;
}

.menu-item-has-children.is-submenu-open > .vs-submenu-toggle::before,
.menu-item-has-children:focus-within > .vs-submenu-toggle::before {
  transform: translateY(1px) rotate(225deg);
}

/* Desktop dropdown panel. */
@media (min-width: 1051px) {
  .main-navigation > ul > .menu-item-has-children {
    display: flex;
    align-items: center;
  }

  .main-navigation .sub-menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% - 9px);
    left: 50%;
    min-width: 230px;
    width: max-content;
    max-width: min(330px, 88vw);
    margin: 0;
    padding: 9px;
    display: block;
    background: rgba(8,8,8,.98);
    border: 1px solid rgba(196,162,96,.23);
    border-radius: 9px;
    box-shadow: 0 20px 45px rgba(0,0,0,.48);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 9px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  /* Invisible bridge prevents the pointer from falling through the small gap
     between the top-level label and the dropdown panel. */
  .main-navigation > ul > .menu-item-has-children > .sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
  }

  .main-navigation .menu-item-has-children:hover > .sub-menu,
  .main-navigation .menu-item-has-children:focus-within > .sub-menu,
  .main-navigation .menu-item-has-children.is-submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .main-navigation .sub-menu li {
    position: relative;
    display: block;
    min-width: 0;
  }

  .main-navigation .sub-menu li + li {
    border-top: 1px solid rgba(255,255,255,.055);
  }

  .main-navigation .sub-menu a {
    padding: 11px 34px 11px 13px;
    color: rgba(255,255,255,.68);
    font-size: .58rem;
    letter-spacing: .13em;
    line-height: 1.4;
    white-space: normal;
    border-radius: 5px;
    transition: color .18s ease, background .18s ease, padding-left .18s ease;
  }

  .main-navigation .sub-menu a::after {
    display: none;
  }

  .main-navigation .sub-menu a:hover,
  .main-navigation .sub-menu .current-menu-item > a,
  .main-navigation .sub-menu .current-menu-ancestor > a {
    color: var(--vs-paper);
    background: rgba(196,162,96,.075);
    padding-left: 17px;
  }

  .main-navigation .sub-menu .vs-submenu-toggle {
    right: 5px;
    width: 26px;
    height: 26px;
  }

  /* Third level and deeper open sideways, staying visually attached to the
     parent panel. */
  .main-navigation .sub-menu .sub-menu {
    top: -9px;
    left: calc(100% + 7px);
    transform: translate(7px, 0);
  }

  .main-navigation .sub-menu .menu-item-has-children:hover > .sub-menu,
  .main-navigation .sub-menu .menu-item-has-children:focus-within > .sub-menu,
  .main-navigation .sub-menu .menu-item-has-children.is-submenu-open > .sub-menu {
    transform: translate(0, 0);
  }

  .main-navigation .sub-menu .menu-item-has-children > .vs-submenu-toggle::before {
    transform: translateX(-2px) rotate(-45deg);
  }
  .main-navigation .sub-menu .menu-item-has-children.is-submenu-open > .vs-submenu-toggle::before,
  .main-navigation .sub-menu .menu-item-has-children:focus-within > .vs-submenu-toggle::before {
    transform: translateX(1px) rotate(135deg);
  }
}

/* Tablet/mobile: submenu opens inside the existing black navigation sheet. */
@media (max-width: 1050px) {
  .main-navigation .menu-item-has-children {
    display: block;
  }

  .main-navigation .menu-item-has-children > a {
    padding-right: 52px;
  }

  .main-navigation .menu-item-has-children > .vs-submenu-toggle {
    top: 6px;
    right: 0;
    width: 38px;
    height: 38px;
    transform: none;
    color: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.08);
  }

  .main-navigation .menu-item-has-children.is-submenu-open > .vs-submenu-toggle {
    color: var(--vs-gold);
    border-color: rgba(196,162,96,.30);
    background: rgba(196,162,96,.07);
  }

  .main-navigation .sub-menu {
    display: block;
    max-height: 0;
    margin: 0 0 0 10px;
    padding: 0 0 0 15px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    border-left: 1px solid rgba(196,162,96,.28);
    transition: max-height .28s ease, opacity .2s ease, visibility .2s ease, margin-bottom .2s ease;
  }

  .main-navigation .menu-item-has-children.is-submenu-open > .sub-menu {
    max-height: 1200px;
    margin-bottom: 8px;
    opacity: 1;
    visibility: visible;
  }

  .main-navigation .sub-menu li {
    border-top: 1px solid rgba(255,255,255,.05);
  }

  .main-navigation .sub-menu a {
    padding: 11px 42px 11px 0;
    color: rgba(255,255,255,.62);
    font-size: .58rem;
    letter-spacing: .13em;
    line-height: 1.35;
  }

  .main-navigation .sub-menu a:hover,
  .main-navigation .sub-menu .current-menu-item > a,
  .main-navigation .sub-menu .current-menu-ancestor > a {
    color: var(--vs-gold);
  }

  .main-navigation .sub-menu .menu-item-has-children > .vs-submenu-toggle {
    top: 3px;
    width: 34px;
    height: 34px;
    border-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-navigation .sub-menu,
  .vs-submenu-toggle,
  .vs-submenu-toggle::before {
    transition: none !important;
  }
}



/* ==========================================================================
   v1.3.33 — homepage hero parity with article/category heroes
   ========================================================================== */
.vs-home-editorial-hero:not(.has-image) {
  background:
    radial-gradient(circle at 52% 34%, rgba(196,162,96,.10), transparent 32%),
    linear-gradient(145deg, #090909, #030303 70%);
}
.vs-home-editorial-meta .vs-text-link { color: rgba(255,255,255,.82); }
.vs-home-editorial-meta .vs-text-link:hover { color: var(--vs-white); }
html[lang^="de"] .vs-home-editorial-head h1 {
  max-width: 980px;
  font-size: clamp(2.55rem, 4.25vw, 4.55rem);
}
@media (max-width: 760px) {
  html[lang^="de"] .vs-home-editorial-head h1 {
    max-width: 94%;
    font-size: clamp(2.15rem, 9.7vw, 3.15rem);
  }
}


/* ==========================================================================
   v1.3.34 — exact homepage/category hero parity + full-width filter strip
   ========================================================================== */

/* The homepage deliberately reuses the category hero classes in the markup.
   Keep only link-specific styling here so its geometry stays pixel-identical
   to category/archive heroes on desktop and mobile. */
.vs-home-editorial-meta a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.vs-home-editorial-meta a:hover {
  color: var(--vs-gold);
}
.vs-home-editorial-meta a span {
  margin-left: 8px;
  color: var(--vs-gold);
}

/* Collection filters are a true edge-to-edge navigation band. */
.vs-signature-strip-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.vs-signature-strip .vs-filter-button:first-child {
  border-left: 0;
}
.vs-signature-strip .vs-filter-button:last-child {
  border-right: 0;
}

/* The older homepage-specific German override targeted the previous hero.
   The shared category typography now controls the homepage too. */
html[lang^="de"] .vs-home-editorial-head h1 {
  max-width: 1040px;
  font-size: clamp(2.7rem, 4.6vw, 4.9rem);
  line-height: .96;
}

@media (max-width: 760px) {
  .vs-signature-strip-inner {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  html[lang^="de"] .vs-home-editorial-head h1 {
    max-width: 92%;
    font-size: clamp(2.25rem, 10.5vw, 3.35rem);
    line-height: .98;
  }
}


/* ==========================================================================
   v1.3.35 — multilingual Seascape Photography homepage signature
   ========================================================================== */
/* The eyebrow remains uppercase through .vs-overline; the slogan deliberately
   keeps its natural sentence case in every language. */
.vs-home-editorial-head h1 {
  text-transform: none;
}

/* German is naturally longer; keep the slogan visually balanced in two lines
   on common phone widths without affecting the other languages. */
@media (max-width: 760px) {
  html[lang^="de"] .vs-home-editorial-head h1 {
    max-width: 96%;
    font-size: clamp(1.9rem, 8.6vw, 2.75rem);
    line-height: 1.01;
  }
}



/* ========================================================================== 
   v1.3.37 — content-driven cinematic hero height
   Category, classic article and homepage heroes now grow only as much as the
   editorial content needs. Desktop keeps the existing top/bottom breathing
   room; mobile uses the same breathing room above and below the content.
   ========================================================================== */

/* Remove the fixed/minimum cinematic height: the number of title lines now
   determines the total hero height while preserving the established padding. */
.vs-category-archive-hero,
.vs-classic-hero {
  min-height: 0;
  height: auto;
}

/* The homepage reuses .vs-category-archive-hero, so it follows the exact same
   content-driven geometry automatically. */

@media (max-width: 760px) {
  .vs-category-archive-head,
  .vs-classic-head {
    padding-top: 54px;
    padding-bottom: 54px;
  }
}

/* ==========================================================================
   v1.3.38 — compact universal footer + normal end-of-content spacing
   ========================================================================== */

/* The large promotional footer masthead has been removed. The utility footer
   now begins directly after the page content with one clean separator. */
.site-footer {
  margin-top: 0;
}
.footer-bottom {
  min-height: 76px;
  border-top: 0;
}

/* Keep a consistent, restrained final breathing space across the site instead
   of the old 90–165px gaps. These rules affect only the bottom edge of each
   page type; their internal/top spacing remains unchanged. */
.vs-home > .vs-shop-section:last-child,
.vs-home > .vs-works-section:last-child {
  padding-bottom: clamp(40px, 4vw, 56px);
}
.vs-page {
  padding-bottom: clamp(40px, 4vw, 56px);
}
.vs-shop-page {
  padding-bottom: clamp(40px, 4vw, 56px);
}
.vs-classic-article {
  padding-bottom: clamp(40px, 4vw, 56px);
}
.vs-gallery-page .vs-masonry,
.vs-archive .vs-masonry {
  padding-bottom: clamp(30px, 3vw, 44px);
}
.vs-pagination {
  padding-bottom: clamp(34px, 3.5vw, 48px);
}
.vs-pagination:empty {
  display: none;
  padding: 0;
}
.vs-empty {
  padding-bottom: clamp(40px, 4vw, 56px);
}

@media (max-width: 760px) {
  .vs-home > .vs-shop-section:last-child,
  .vs-home > .vs-works-section:last-child,
  .vs-page,
  .vs-shop-page,
  .vs-classic-article {
    padding-bottom: 34px;
  }

  .vs-gallery-page .vs-masonry,
  .vs-archive .vs-masonry {
    padding-bottom: 28px;
  }

  .vs-pagination {
    padding-bottom: 34px;
  }

  .vs-empty {
    padding-bottom: 34px;
  }
}



/* =========================================================
   v1.3.39 — localized Metal Prints information link
   ========================================================= */


/* =========================================================
   v1.3.41 — standard pages use the exact article-header geometry
   Standard WordPress pages now literally reuse the traditional article hero,
   head, taxonomy and byline classes. Only the background is page-specific:
   a fixed dark-grey monochrome composition shared by every standard page.
   ========================================================= */
.vs-page {
  width: 100%;
  margin: 0;
  padding: 0 0 clamp(40px, 4vw, 56px);
  background: var(--vs-black);
}

/* Geometry and typography intentionally come from .vs-classic-hero and
   .vs-classic-head, so page and article spacing stay identical as titles wrap. */
.vs-page-hero {
  background:
    radial-gradient(95% 150% at 86% 8%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.055) 24%, transparent 55%),
    radial-gradient(92% 135% at 10% 88%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.025) 31%, transparent 61%),
    linear-gradient(128deg, #26292c 0%, #1b1d20 38%, #202326 67%, #141619 100%);
}
.vs-page-hero::before,
.vs-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vs-page-hero::before {
  z-index: 0;
  inset: -28% -12% -34% 20%;
  background:
    linear-gradient(118deg, transparent 24%, rgba(255,255,255,.055) 43%, rgba(255,255,255,.012) 52%, transparent 68%),
    repeating-linear-gradient(118deg, transparent 0 28px, rgba(255,255,255,.018) 29px 30px, transparent 31px 62px);
  filter: blur(1.5px);
  transform: skewX(-7deg);
  opacity: .92;
}
.vs-page-hero::after {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.02) 44%, rgba(0,0,0,.34) 100%),
    linear-gradient(90deg, rgba(0,0,0,.22) 0%, transparent 56%, rgba(0,0,0,.10) 100%);
}

.vs-page-content {
  width: min(calc(100% - (var(--vs-pad) * 2)), 1050px);
  margin-inline: auto;
  padding-top: clamp(46px, 5vw, 72px);
}
.vs-page .vs-entry-content { max-width: 100%; }

@media (max-width: 760px) {
  .vs-page { padding-bottom: 34px; }
  .vs-page-content { padding-top: 38px; }
}



/* ==========================================================================
   v1.3.42 — photograph viewer without comments / full-width print action
   ========================================================================== */

/* Photographs are presentation + purchase surfaces, not discussion threads.
   With the comment control removed, the product action owns the complete
   width of the information column while retaining its established styling. */
.vs-photo-actions {
  display: block;
}
.vs-photo-product-action {
  width: 100%;
  min-width: 0;
}
.vs-photo-product-button {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
.vs-photo-product-button > span:first-child {
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .vs-photo-mobile-dock {
    grid-template-columns: minmax(0, 1fr);
  }
  .vs-photo-mobile-print {
    width: 100%;
    white-space: nowrap;
    font-size: clamp(.62rem, 2.75vw, .76rem);
  }
  .vs-photo-mobile-print > span {
    min-width: 0;
    white-space: nowrap;
  }
}


/* ============================================================
   v1.3.43 — protected public photo delivery / Google Images opt-out
   The PHP layer caps public photo sources at 2048px while masters remain stored.
   ============================================================ */

/* ==========================================================================
   v1.3.44 — mobile photograph action uses the persistent dock only
   ========================================================================== */

/* v1.3.42 made the in-panel product action full width for desktop, but that
   late rule overrode the older mobile rule that hid it. On phones the fixed
   lower dock is the sole purchase action. */
@media (max-width: 760px) {
  .vs-photo-actions {
    display: none !important;
  }
}

/* ==========================================================================
   v1.3.45 — compact Metal Prints story + shared page-hero background
   ========================================================================== */

/* The homepage Metal Prints block now uses the exact same fixed grey visual
   language as standard page headers, while remaining much more compact. */
.vs-metal-story {
  position: relative;
  overflow: hidden;
  padding-top: clamp(54px, 5.2vw, 78px);
  padding-bottom: clamp(46px, 4.6vw, 68px);
  background:
    radial-gradient(95% 150% at 86% 8%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.055) 24%, transparent 55%),
    radial-gradient(92% 135% at 10% 88%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.025) 31%, transparent 61%),
    linear-gradient(128deg, #26292c 0%, #1b1d20 38%, #202326 67%, #141619 100%);
}
.vs-metal-story::before,
.vs-metal-story::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.vs-metal-story::before {
  z-index: 0;
  inset: -28% -12% -34% 20%;
  background:
    linear-gradient(118deg, transparent 24%, rgba(255,255,255,.055) 43%, rgba(255,255,255,.012) 52%, transparent 68%),
    repeating-linear-gradient(118deg, transparent 0 28px, rgba(255,255,255,.018) 29px 30px, transparent 31px 62px);
  filter: blur(1.5px);
  transform: skewX(-7deg);
  opacity: .92;
}
.vs-metal-story::after {
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.02) 44%, rgba(0,0,0,.34) 100%),
    linear-gradient(90deg, rgba(0,0,0,.22) 0%, transparent 56%, rgba(0,0,0,.10) 100%);
}
.vs-metal-story > .vs-wrap {
  position: relative;
  z-index: 1;
}

/* Reduce the former large editorial gaps above/below the heading and before
   the three feature columns. */
.vs-metal-story .vs-shop-intro {
  margin-bottom: 0;
  gap: clamp(34px, 4vw, 58px);
}
.vs-metal-features {
  margin-top: clamp(32px, 3.5vw, 48px);
}
.vs-metal-feature {
  min-height: 0;
  padding: clamp(24px, 2.6vw, 36px);
}
.vs-metal-index {
  margin-bottom: clamp(22px, 2.2vw, 32px);
  font-size: clamp(.70rem, .72vw, .82rem);
  line-height: 1;
}
.vs-metal-feature h3 {
  margin-bottom: 12px;
}
.vs-metal-partner-note {
  display: none !important;
}

@media (max-width: 760px) {
  .vs-metal-story {
    padding-top: 42px;
    padding-bottom: 36px;
  }
  .vs-metal-story .vs-shop-intro {
    gap: 24px;
  }
  .vs-metal-features {
    margin-top: 28px;
  }
  .vs-metal-feature {
    padding: 24px 20px;
  }
  .vs-metal-index {
    margin-bottom: 18px;
    font-size: .76rem;
  }
}


/* ==========================================================================
   v1.3.46 — editorial blog categories on the homepage
   ========================================================================== */

.vs-home-journal {
  padding: clamp(62px, 6.5vw, 96px) 0 clamp(70px, 7vw, 108px);
  border-top: 1px solid var(--vs-line-soft);
  background: var(--vs-black);
}
.vs-home-journal-category + .vs-home-journal-category {
  margin-top: clamp(70px, 7vw, 112px);
  padding-top: clamp(62px, 6vw, 92px);
  border-top: 1px solid var(--vs-line-soft);
}
.vs-home-journal-head {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .62fr);
  align-items: end;
  gap: clamp(34px, 5vw, 84px);
  margin-bottom: clamp(30px, 3.4vw, 48px);
}
.vs-home-journal-head h2 {
  margin: 9px 0 0;
  font-family: var(--vs-serif);
  font-size: clamp(3.1rem, 5.8vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -.052em;
  line-height: .88;
  text-transform: uppercase;
}
.vs-home-journal-intro {
  max-width: 650px;
}
.vs-home-journal-intro p {
  margin: 0;
  color: var(--vs-muted);
  font-size: .96rem;
  line-height: 1.7;
}
.vs-home-journal-intro .vs-text-link {
  margin-top: 18px;
}
.vs-home-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vs-gap);
}
.vs-home-journal-card {
  min-width: 0;
}
.vs-home-journal-card-link {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: clamp(310px, 29vw, 510px);
  border-radius: var(--vs-photo-radius);
  background: #111;
  box-shadow: 0 0 0 1px rgba(255,255,255,.045);
  isolation: isolate;
}
.vs-home-journal-card-media,
.vs-home-journal-card-shade {
  position: absolute;
  inset: 0;
}
.vs-home-journal-card-media {
  z-index: 0;
  overflow: hidden;
}
.vs-home-journal-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.66) saturate(.76) contrast(1.04);
  transform: scale(1.001);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}
.vs-home-journal-card-shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.14), transparent 62%);
  transition: background .35s ease;
}
.vs-home-journal-card h3 {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 2vw, 34px);
  right: clamp(22px, 2vw, 34px);
  bottom: clamp(22px, 2vw, 34px);
  margin: 0;
  color: var(--vs-paper);
  font-family: var(--vs-serif);
  font-size: clamp(1.65rem, 2.25vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.vs-home-journal-card-link:hover .vs-home-journal-card-image,
.vs-home-journal-card-link:focus-visible .vs-home-journal-card-image {
  filter: brightness(.76) saturate(.84) contrast(1.03);
  transform: scale(1.025);
}
.vs-home-journal-card-link:focus-visible {
  outline: 1px solid var(--vs-gold);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .vs-home-journal-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .vs-home-journal-intro { max-width: 720px; }
  .vs-home-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-home-journal-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vs-home-journal-card:last-child:nth-child(odd) .vs-home-journal-card-link { min-height: clamp(300px, 58vw, 470px); }
}

@media (max-width: 600px) {
  .vs-home-journal {
    padding-top: 52px;
    padding-bottom: 64px;
  }
  .vs-home-journal-category + .vs-home-journal-category {
    margin-top: 58px;
    padding-top: 52px;
  }
  .vs-home-journal-head { margin-bottom: 24px; }
  .vs-home-journal-head h2 { font-size: clamp(2.65rem, 13vw, 4.2rem); }
  .vs-home-journal-grid { grid-template-columns: 1fr; gap: 12px; }
  .vs-home-journal-card:last-child:nth-child(odd) { grid-column: auto; }
  .vs-home-journal-card-link,
  .vs-home-journal-card:last-child:nth-child(odd) .vs-home-journal-card-link {
    min-height: clamp(280px, 92vw, 430px);
  }
  .vs-home-journal-card h3 {
    left: 20px;
    right: 20px;
    bottom: 20px;
    font-size: clamp(1.6rem, 8vw, 2.35rem);
  }
}


/* ==========================================================================
   v1.3.47 — gold print eyebrow + single-row horizontal journal rails
   ========================================================================== */

/* Keep this small editorial label in the site's established gold in every
   language, regardless of any inherited/muted overline treatment. */
.vs-metal-story .vs-overline {
  color: var(--vs-gold) !important;
}

/* Journal cards stay on one continuous horizontal rail. More recent articles
   can therefore be shown without creating extra rows that resemble the photo
   collection above. */
.vs-home-journal-grid {
  display: flex;
  grid-template-columns: none;
  gap: clamp(14px, 1.3vw, 22px);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 14px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(196,162,96,.48) rgba(255,255,255,.07);
}
.vs-home-journal-grid::-webkit-scrollbar {
  height: 5px;
}
.vs-home-journal-grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.07);
}
.vs-home-journal-grid::-webkit-scrollbar-thumb {
  background: rgba(196,162,96,.48);
  border-radius: 999px;
}
.vs-home-journal-card {
  flex: 0 0 clamp(315px, 28vw, 490px);
  min-width: 0;
  scroll-snap-align: start;
}
.vs-home-journal-card-link {
  min-height: clamp(300px, 27vw, 470px);
}

/* Neutralise the old 2-column/1-column journal layout: this rail is one row
   on tablets and phones too. */
@media (max-width: 900px) {
  .vs-home-journal-grid {
    display: flex;
    grid-template-columns: none;
  }
  .vs-home-journal-card,
  .vs-home-journal-card:last-child:nth-child(odd) {
    flex: 0 0 min(72vw, 420px);
    grid-column: auto;
  }
  .vs-home-journal-card-link,
  .vs-home-journal-card:last-child:nth-child(odd) .vs-home-journal-card-link {
    min-height: clamp(290px, 54vw, 430px);
  }
}

@media (max-width: 600px) {
  .vs-home-journal-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    padding-bottom: 10px;
  }
  .vs-home-journal-card,
  .vs-home-journal-card:last-child:nth-child(odd) {
    flex: 0 0 min(84vw, 360px);
    grid-column: auto;
  }
  .vs-home-journal-card-link,
  .vs-home-journal-card:last-child:nth-child(odd) .vs-home-journal-card-link {
    min-height: clamp(280px, 98vw, 410px);
  }
}

/* ==========================================================================\n   v1.3.48 — desktop journal arrows; mobile rail unchanged\n   ========================================================================== */

.vs-home-journal-rail {
  position: relative;
}

.vs-home-journal-nav {
  display: none;
}

@media (min-width: 901px) {
  /* On desktop the rail behaves like a restrained image carousel: no visible
     browser scrollbar, just two light controls over the edges. Trackpads and
     horizontal wheel gestures continue to work normally. */
  .vs-home-journal-grid {
    scrollbar-width: none;
    padding-bottom: 0;
  }
  .vs-home-journal-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .vs-home-journal-nav {
    position: absolute;
    z-index: 8;
    top: 50%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(196,162,96,.5);
    border-radius: 999px;
    background: rgba(5,5,5,.72);
    color: var(--vs-paper);
    font: 400 1.25rem/1 var(--vs-sans);
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
  }
  .vs-home-journal-nav--prev { left: 14px; }
  .vs-home-journal-nav--next { right: 14px; }
  .vs-home-journal-nav:hover,
  .vs-home-journal-nav:focus-visible {
    border-color: var(--vs-gold);
    background: rgba(5,5,5,.92);
    color: var(--vs-gold);
    outline: none;
  }
  .vs-home-journal-nav:disabled {
    opacity: 0;
    pointer-events: none;
  }
}


/* ==========================================================================
   v1.3.49 — Selection-first portfolio + contextual collection link
   ========================================================================== */
.vs-collection-more {
  display: flex;
  justify-content: flex-end;
  padding-top: clamp(22px, 2.4vw, 34px);
}
.vs-collection-more[hidden] { display: none !important; }
.vs-collection-more .vs-text-link {
  margin-left: auto;
  text-align: right;
}
@media (max-width: 760px) {
  .vs-collection-more {
    padding-top: 18px;
  }
}