/*
Theme Name:  ZHEN Collection V3
Theme URI:   https://u-zhen.ch/
Author:      Kreatívoldal (Hajdú Lajos)
Author URI:  https://kreativoldal.hu/
Description: Silent Atelier V3 — Editorial split layout, full-bleed photo hero, alternating collection panels, ghost chapter numbers. Client-approved White/Ivory palette.
Version:     0.3.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zhen-v3
*/

/* =============================================================
   1. DESIGN TOKENS
============================================================= */
:root {
  --white:        #FFFFFF;
  --ivory:        #F5F1EA;
  --ivory-mid:    #EDE8DE;
  --ivory-ghost:  #F0EBE3;
  --ink:          #15110F;
  --char:         #6B6358;
  --gold:         #B89A5C;
  --stone:        #D8D2C7;

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Jost', -apple-system, 'Segoe UI', sans-serif;

  --ease-luxury:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
   2. RESET & BASE
============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--ivory); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }

/* =============================================================
   3. KEYFRAMES
============================================================= */
@keyframes zv3-rise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0);    }
}
@keyframes zv3-fade-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes zv3-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zv3-grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes zv3-grow-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes zv3-ken {
  from { transform: scale(1.07); }
  to   { transform: scale(1);    }
}
@keyframes zv3-scroll-dot {
  0%   { top: -100%; }
  100% { top: 200%;  }
}

/* =============================================================
   4. SITE HEADER
============================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 6vw, 80px);
  height: 72px;
  background: rgba(245, 241, 234, 0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.5s ease,
              backdrop-filter 0.5s ease,
              -webkit-backdrop-filter 0.5s ease,
              box-shadow 0.5s ease;
}
/* Thin gold rule at the bottom of the header bar */
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: clamp(24px, 6vw, 80px);
  right: clamp(24px, 6vw, 80px);
  height: 1px;
  background: rgba(184, 154, 92, 0.30);
}
.site-header.scrolled {
  background: rgba(245, 241, 234, 0.94);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  box-shadow: 0 1px 0 rgba(21, 17, 15, 0.08);
}

/* Brand mark */
.zv3-brand {
  grid-column: 1;
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.28rem;
  letter-spacing: 0.56em;
  text-indent: 0.56em;
  color: var(--ink);
  animation: zv3-fade-down 0.85s var(--ease-luxury) 0.1s both;
}

/* Primary nav */
.zv3-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  animation: zv3-fade-down 0.85s var(--ease-luxury) 0.2s both;
}
.zv3-nav a {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--char);
  padding: 4px 0;
  position: relative;
  transition: color 0.3s ease;
}
.zv3-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.5s ease;
}
.zv3-nav a:hover,
.zv3-nav a[aria-current="page"] { color: var(--gold); }
.zv3-nav a:hover::after,
.zv3-nav a[aria-current="page"]::after { width: 100%; }
.zv3-nav-sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  margin: 0 22px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Right group: lang + burger */
.zv3-header-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 28px;
  animation: zv3-fade-down 0.85s var(--ease-luxury) 0.3s both;
}

/* Language switcher */
.zv3-lang {
  display: flex;
  align-items: center;
}
/* List output from zhen_v3_lang_switcher() */
.zv3-lang-list {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}
.zv3-lang-item a {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--char);
  padding: 4px 0;
  transition: color 0.3s ease;
  text-decoration: none;
  display: block;
}
.zv3-lang-item a:hover,
.zv3-lang-item.is-active a { color: var(--gold); }
.zv3-lang-dot {
  font-size: 0.5rem;
  color: var(--stone);
  padding: 0 7px;
  user-select: none;
  list-style: none;
}

/* Hamburger */
.zv3-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 0;
  width: 28px;
}
.zv3-burger span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: width 0.3s ease;
}
.zv3-burger span:nth-child(1) { width: 28px; }
.zv3-burger span:nth-child(2) { width: 18px; }

/* Mobile fullscreen overlay */
.zv3-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 0 clamp(24px, 6vw, 80px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.zv3-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.zv3-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.zv3-overlay__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.28rem;
  letter-spacing: 0.56em;
  text-indent: 0.56em;
  color: var(--ivory);
}
.zv3-overlay__close {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.55);
  transition: color 0.3s ease;
}
.zv3-overlay__close:hover { color: var(--ivory); }
.zv3-overlay__links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.zv3-overlay__links a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 14vw, 5.2rem);
  line-height: 1.12;
  color: var(--ivory);
  opacity: 0.88;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.zv3-overlay__links a:last-child { font-style: italic; }
.zv3-overlay__links a:hover { color: var(--gold); opacity: 1; }
.zv3-overlay__lang {
  padding-bottom: 44px;
  display: flex;
  gap: 20px;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.38);
}
.zv3-overlay__lang span {
  cursor: pointer;
  transition: color 0.3s ease;
}
.zv3-overlay__lang span:hover,
.zv3-overlay__lang span.is-active { color: var(--gold); }

/* zv3-header-rule handled via .site-header::after */

/* =============================================================
   TranslatePress shortcode — styled to match zv3-lang design
============================================================= */
/* Hide TranslatePress floating widget — we use our own in the header */
#trp-floatingbar,
.trp-floating-switcher,
.trp-floatingbar { display: none !important; }

/* TranslatePress [language_switcher] inside .zv3-lang */
.zv3-lang .trp-language-switcher {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 0;
}
.zv3-lang .trp-language-switcher li { display: flex; align-items: center; }
.zv3-lang .trp-language-switcher li + li::before {
  content: '·';
  font-size: 0.5rem;
  color: var(--stone);
  padding: 0 7px;
}
.zv3-lang .trp-language-switcher li a,
.zv3-lang .trp-language-switcher li span {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.59rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--char);
  text-decoration: none;
  padding: 2px 0;
  transition: color 0.3s ease;
  background: none;
}
.zv3-lang .trp-language-switcher li.current-language-li a,
.zv3-lang .trp-language-switcher li a:hover { color: var(--gold); }
.zv3-lang .trp-language-switcher li img { display: none; } /* hide flags */

/* zv3-lang-list inside mobile overlay */
.zv3-overlay__lang .zv3-lang-list {
  list-style: none;
  display: flex;
  padding: 0; margin: 0;
  gap: 0;
  flex-wrap: wrap;
  align-items: center;
}
.zv3-overlay__lang .zv3-lang-dot { padding: 0 14px; }
.zv3-overlay__lang .zv3-lang-item a {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.38);
  transition: color 0.3s ease;
}
.zv3-overlay__lang .zv3-lang-item.is-active a,
.zv3-overlay__lang .zv3-lang-item a:hover { color: var(--gold); }

/* =============================================================
   5. HERO — full-bleed photo + editorial headline
============================================================= */
.zv3-hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Photo layer */
.zv3-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.zv3-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: zv3-ken 9s var(--ease-luxury) both;
}

/* Dark cinematic veil — top-left scrim, keeps the photo breathing */
.zv3-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(21,17,15,0.32) 0%,
    rgba(21,17,15,0.10) 44%,
    transparent 70%
  );
}

/* Dark gradient from bottom — headline reads in white against deep shadow */
.zv3-hero__fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(21,17,15,0.90) 0%,
    rgba(21,17,15,0.60) 38%,
    rgba(21,17,15,0) 100%
  );
}

/* Content at bottom of hero */
.zv3-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(24px, 6vw, 80px) clamp(56px, 9vh, 96px);
}

.zv3-hero__eyebrow {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.63rem;
  letter-spacing: 0.50em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.68);
  margin-bottom: clamp(20px, 3vh, 30px);
  animation: zv3-fade 1s ease 0.7s both;
}

/* Massive editorial headline — ivory on dark photo */
.zv3-hero__h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 10.5vw, 10.5rem);
  line-height: 0.90;
  letter-spacing: -0.02em;
  color: var(--ivory);
}
.zv3-hero__hline {
  display: block;
  overflow: hidden;
  padding-bottom: 0.24em;
  margin-bottom: -0.18em;
}
.zv3-hero__hline span { display: inline-block; }
.zv3-hero__hline:nth-child(1) span { animation: zv3-rise 1.1s var(--ease-luxury) 0.35s both; }
.zv3-hero__hline:nth-child(2) span { animation: zv3-rise 1.1s var(--ease-luxury) 0.55s both; }
.zv3-hero__hline:nth-child(3) {
  display: block;
  overflow: hidden;
  padding-bottom: 0.24em;
  margin-bottom: -0.18em;
}
.zv3-hero__hline:nth-child(3) span {
  font-style: italic;
  animation: zv3-rise 1.1s var(--ease-luxury) 0.72s both;
}

.zv3-hero__rule {
  display: block;
  width: 58px;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  margin: clamp(22px, 3.5vh, 34px) 0 clamp(16px, 2.5vh, 22px);
  animation: zv3-grow-x 0.85s var(--ease-luxury) 1.3s both;
}

.zv3-hero__sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.75rem);
  color: rgba(245, 241, 234, 0.78);
  animation: zv3-fade 1s ease 1.55s both;
}

/* Vertical scroll indicator */
.zv3-hero__scroll {
  position: absolute;
  right: clamp(24px, 6vw, 80px);
  bottom: clamp(44px, 7vh, 84px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.zv3-hero__scroll-line {
  width: 1px;
  height: 58px;
  background: var(--stone);
  transform-origin: top;
  animation: zv3-grow-y 0.85s var(--ease-luxury) 2s both;
  position: relative;
  overflow: hidden;
}
.zv3-hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold);
  animation: zv3-scroll-dot 2.2s ease-in-out 2.6s infinite;
}
.zv3-hero__scroll-label {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.54rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.50);
  writing-mode: vertical-rl;
  animation: zv3-fade 1s ease 2.2s both;
}

/* =============================================================
   6. ABOUT — dramatic split screen
============================================================= */
.zv3-about {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
}

/* Photo side */
.zv3-about__photo {
  position: relative;
  overflow: hidden;
  min-height: 640px;
}
.zv3-about__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.4s var(--ease-luxury);
}
.zv3-about:hover .zv3-about__photo img { transform: scale(1.035); }

/* Thin gold line between columns */
.zv3-about__divider {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-0.5px);
  width: 1px;
  height: 100%;
  background: var(--gold);
  opacity: 0.22;
  z-index: 2;
  pointer-events: none;
}

/* Text side */
.zv3-about__text {
  padding: clamp(80px, 13vh, 150px) clamp(44px, 6.5vw, 96px) clamp(60px, 9vh, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
}

/* Ghost chapter number */
.zv3-about__ghost {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(7rem, 14vw, 13rem);
  line-height: 0.82;
  color: var(--ivory-ghost);
  letter-spacing: -0.04em;
  user-select: none;
  margin-left: -4px;
  margin-bottom: -24px;
  position: relative;
  z-index: 0;
}

.zv3-about__inner { position: relative; z-index: 1; }

.zv3-about__eyebrow {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.50em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.zv3-about__rule {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin-bottom: clamp(26px, 4vh, 40px);
  transform-origin: left;
}

/* Oversized pull quote */
.zv3-about__pull {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-bottom: clamp(26px, 4vh, 40px);
}

.zv3-about__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.15vw, 1rem);
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--char);
  max-width: 400px;
  margin-bottom: clamp(34px, 5vh, 52px);
}

/* Contact card */
.zv3-card {
  border: 1px solid var(--stone);
  padding: clamp(26px, 4vw, 42px) clamp(22px, 3.5vw, 38px);
  max-width: 360px;
}
.zv3-card__eye {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.57rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.zv3-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.22rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 11px;
}
.zv3-card__address {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--char);
  letter-spacing: 0.02em;
  font-style: normal;
}
.zv3-card__hr {
  width: 22px;
  height: 1px;
  background: var(--stone);
  margin: 14px 0;
}
.zv3-card__links {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 2;
  color: var(--char);
}
.zv3-card__links a {
  color: var(--char);
  border-bottom: 1px solid rgba(184,154,92,0.38);
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.zv3-card__links a:hover { color: var(--gold); border-color: var(--gold); }

/* =============================================================
   7. COLLECTIONS INTRO
============================================================= */
.zv3-coll-intro {
  padding: clamp(100px, 16vh, 190px) clamp(24px, 6vw, 80px) clamp(40px, 6vh, 80px);
  background: var(--ivory);
  position: relative;
  overflow: hidden;
}

/* Large ghost "IV" behind intro */
.zv3-coll-intro__ghost {
  position: absolute;
  right: clamp(24px, 6vw, 80px);
  bottom: -30px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(9rem, 22vw, 22rem);
  line-height: 1;
  color: var(--ivory-mid);
  letter-spacing: -0.05em;
  user-select: none;
  z-index: 0;
  pointer-events: none;
}
.zv3-coll-intro__content { position: relative; z-index: 1; max-width: 680px; }
.zv3-coll-intro__eyebrow {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.50em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(18px, 2.5vh, 26px);
}
.zv3-coll-intro__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: clamp(22px, 3vh, 36px);
}
.zv3-coll-intro__title em { font-style: italic; }
.zv3-coll-intro__rule {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin-bottom: clamp(20px, 3vh, 30px);
}
.zv3-coll-intro__sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.2vw, 1.02rem);
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--char);
}

/* =============================================================
   8. COLLECTION PANELS
============================================================= */

/* Shared: "Explore →" link */
.zv3-panel-link {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(21,17,15,0.22);
  padding-bottom: 3px;
  width: fit-content;
  transition: color 0.35s ease, border-color 0.35s ease, gap 0.35s ease;
}
.zv3-panel-link::after {
  content: '→';
  font-size: 0.78rem;
  transition: transform 0.35s ease;
}
.zv3-panel-link:hover {
  color: var(--gold);
  border-color: var(--gold);
  gap: 18px;
}
.zv3-panel-link:hover::after { transform: translateX(4px); }
.zv3-panel-link--light {
  color: var(--ivory);
  border-color: rgba(245,241,234,0.30);
}
.zv3-panel-link--light:hover { color: var(--gold); border-color: var(--gold); }

/* --- ODD: Split layout — photo left, text right --- */
.zv3-panel-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 85vh;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.zv3-panel-split__photo {
  position: relative;
  overflow: hidden;
}
.zv3-panel-split__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-luxury);
}
.zv3-panel-split:hover .zv3-panel-split__photo img { transform: scale(1.04); }

/* Gold line draws from left on hover */
.zv3-panel-split__photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--gold);
  z-index: 2;
  transition: width 0.75s var(--ease-luxury);
}
.zv3-panel-split:hover .zv3-panel-split__photo::after { width: 100%; }

.zv3-panel-split__text {
  padding: clamp(60px, 10vh, 130px) clamp(44px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Ghost chapter number behind text */
.zv3-panel-split__ghost {
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(10rem, 22vw, 21rem);
  line-height: 1;
  color: var(--ivory-ghost);
  letter-spacing: -0.05em;
  user-select: none;
  z-index: 0;
  pointer-events: none;
}

.zv3-panel-split__content { position: relative; z-index: 1; }

.zv3-panel-split__index {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(16px, 2.5vh, 24px);
}
.zv3-panel-split__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 5.5rem);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: clamp(18px, 2.8vh, 26px);
  transition: transform 0.65s var(--ease-luxury);
}
.zv3-panel-split:hover .zv3-panel-split__title { transform: translateY(-6px); }
.zv3-panel-split__rule {
  display: block;
  width: 38px;
  height: 1px;
  background: var(--gold);
  margin-bottom: clamp(18px, 2.5vh, 26px);
}
.zv3-panel-split__desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  line-height: 1.95;
  letter-spacing: 0.025em;
  color: var(--char);
  max-width: 320px;
  margin-bottom: clamp(28px, 4vh, 40px);
}

/* --- EVEN: Full-bleed — photo fills, text overlay bottom-left --- */
.zv3-panel-full {
  position: relative;
  min-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.zv3-panel-full__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.zv3-panel-full__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-luxury);
}
.zv3-panel-full:hover .zv3-panel-full__photo img { transform: scale(1.04); }

/* Dark gradient for text legibility */
.zv3-panel-full__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(21,17,15,0.84) 0%,
    rgba(21,17,15,0.40) 38%,
    rgba(21,17,15,0.08) 66%,
    transparent 100%
  );
}

/* Ghost number top-right, barely visible */
.zv3-panel-full__ghost {
  position: absolute;
  top: clamp(36px, 7vh, 76px);
  right: clamp(24px, 6vw, 80px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(8rem, 17vw, 17rem);
  line-height: 1;
  color: rgba(245,241,234,0.055);
  letter-spacing: -0.05em;
  user-select: none;
  z-index: 1;
  pointer-events: none;
}

/* Gold line draws on hover */
.zv3-panel-full__gold {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--gold);
  z-index: 3;
  transition: width 0.75s var(--ease-luxury);
}
.zv3-panel-full:hover .zv3-panel-full__gold { width: 100%; }

.zv3-panel-full__content {
  position: relative;
  z-index: 2;
  padding: clamp(36px, 5vh, 64px) clamp(24px, 6vw, 80px) clamp(52px, 8vh, 84px);
}
.zv3-panel-full__index {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.52);
  margin-bottom: clamp(14px, 2vh, 20px);
}
.zv3-panel-full__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7.5vw, 7rem);
  line-height: 0.92;
  color: var(--ivory);
  letter-spacing: -0.01em;
  margin-bottom: clamp(18px, 2.5vh, 26px);
  transition: transform 0.65s var(--ease-luxury);
}
.zv3-panel-full:hover .zv3-panel-full__title { transform: translateY(-6px); }
.zv3-panel-full__rule {
  display: block;
  width: 38px;
  height: 1px;
  background: var(--gold);
  margin-bottom: clamp(16px, 2vh, 22px);
}
.zv3-panel-full__desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  line-height: 1.95;
  letter-spacing: 0.025em;
  color: rgba(245,241,234,0.76);
  max-width: 460px;
  margin-bottom: clamp(26px, 3.5vh, 36px);
}

/* =============================================================
   9. FOOTER
============================================================= */
.zv3-footer {
  background: var(--ink);
  color: rgba(245,241,234,0.72);
  padding: clamp(60px, 9vh, 104px) clamp(24px, 6vw, 80px) clamp(36px, 5vh, 52px);
}
.zv3-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 44px;
  max-width: 1400px;
  margin: 0 auto;
}
.zv3-footer__brand { display: flex; flex-direction: column; gap: 9px; }
.zv3-footer__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.54em;
  text-indent: 0.54em;
  color: var(--ivory);
  line-height: 1;
}
.zv3-footer__tagline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.57rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--gold);
}
.zv3-footer__contact { display: flex; flex-direction: column; gap: 5px; text-align: right; }
.zv3-footer__contact-eye {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.57rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
}
.zv3-footer__contact-line {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.75;
  letter-spacing: 0.025em;
  color: rgba(245,241,234,0.66);
}
.zv3-footer__contact-line a {
  color: rgba(245,241,234,0.66);
  border-bottom: 1px solid rgba(184,154,92,0.32);
  padding-bottom: 1px;
  transition: color 0.3s ease;
}
.zv3-footer__contact-line a:hover { color: var(--gold); }
.zv3-footer__bottom {
  max-width: 1400px;
  margin: clamp(40px, 6vh, 62px) auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(245,241,234,0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.30);
}
.zv3-footer__credit {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.28);
  text-decoration: none;
  transition: color 0.3s ease;
}
.zv3-footer__credit:hover { color: var(--gold); }

/* =============================================================
   10. SCROLL REVEAL
============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.1s var(--ease-luxury),
              transform 1.1s var(--ease-luxury);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.22s; }
.reveal-d3 { transition-delay: 0.36s; }
.reveal-d4 { transition-delay: 0.50s; }

/* =============================================================
   11. RESPONSIVE ≤ 768px
============================================================= */
@media ( max-width: 768px ) {
  .site-header { grid-template-columns: 1fr auto; }
  .zv3-nav { display: none; }
  .zv3-lang { display: none; }
  .zv3-burger { display: flex; }
  .zv3-header-right { gap: 0; }

  .zv3-about {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .zv3-about__photo {
    min-height: 60vw;
    max-height: 72vw;
  }
  .zv3-about__divider { display: none; }
  .zv3-about__ghost { font-size: 5rem; }
  .zv3-about__pull { font-size: 1.45rem; }

  .zv3-panel-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .zv3-panel-split__photo {
    height: 64vw;
    min-height: 260px;
    position: relative;
  }
  .zv3-panel-split__photo img { position: absolute; }
  .zv3-panel-split__ghost { display: none; }
  .zv3-panel-split:hover .zv3-panel-split__title { transform: none; }

  .zv3-panel-full { min-height: 88vw; }
  .zv3-panel-full__ghost { display: none; }
  .zv3-panel-full:hover .zv3-panel-full__title { transform: none; }

  .zv3-coll-intro__ghost { display: none; }

  .zv3-footer__inner { flex-direction: column; }
  .zv3-footer__contact { text-align: left; }
  .zv3-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   12. DARK HERO HEADER — transparent header inverted to ivory/white
       Applied when body.has-dark-hero and header is NOT yet scrolled
============================================================= */
body.has-dark-hero .site-header:not(.scrolled) {
  background: linear-gradient(to bottom, rgba(21,17,15,0.42) 0%, transparent 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body.has-dark-hero .site-header:not(.scrolled)::after {
  background: rgba(245, 241, 234, 0.18);
}
body.has-dark-hero .site-header:not(.scrolled) .zv3-brand,
body.has-dark-hero .site-header:not(.scrolled) .zv3-nav a,
body.has-dark-hero .site-header:not(.scrolled) .zv3-lang-item a,
body.has-dark-hero .site-header:not(.scrolled) .zv3-nav a:hover,
body.has-dark-hero .site-header:not(.scrolled) .zv3-nav a[aria-current="page"] {
  color: rgba(245, 241, 234, 0.88);
}
body.has-dark-hero .site-header:not(.scrolled) .zv3-lang-dot {
  color: rgba(245, 241, 234, 0.35);
}
body.has-dark-hero .site-header:not(.scrolled) .zv3-burger span {
  background: var(--ivory);
}
/* Scrolled state stays ivory frosted on all pages */

/* =============================================================
   REDUCED MOTION
============================================================= */
@media ( prefers-reduced-motion: reduce ) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =============================================================
   13. GALLERY PAGES
============================================================= */
.zv3-gallery-hero {
  position: relative;
  padding: clamp(130px, 18vw, 200px) clamp(24px, 6vw, 80px) clamp(60px, 8vh, 96px);
  overflow: hidden;
  background: var(--white);
}
.zv3-gallery-hero__ghost {
  position: absolute;
  top: 40px;
  right: clamp(16px, 4vw, 56px);
  font-family: var(--font-display);
  font-size: clamp(160px, 22vw, 300px);
  font-weight: 300;
  color: var(--ivory-ghost);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}
.zv3-gallery-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.59rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--char);
  margin-bottom: 32px;
  transition: color 0.3s ease;
}
.zv3-gallery-hero__back::before { content: '←'; font-size: 0.75rem; }
.zv3-gallery-hero__back:hover { color: var(--gold); }
.zv3-gallery-hero__label {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.zv3-gallery-hero__title {
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 130px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 0.95;
  margin-bottom: 32px;
}
.zv3-gallery-hero__rule {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 26px;
  transform-origin: left;
}
.zv3-gallery-hero__desc {
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  font-weight: 300;
  letter-spacing: 0.035em;
  color: var(--char);
  max-width: 540px;
  line-height: 1.9;
  margin-bottom: 18px;
}
.zv3-gallery-hero__count {
  font-family: var(--font-sans);
  font-size: 0.59rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(184, 154, 92, 0.55);
}

/* Staggered 3-column grid */
.zv3-gallery-wrap {
  padding: 0 clamp(24px, 6vw, 80px) 120px;
  background: var(--white);
}
.zv3-gallery-grid {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.zv3-gallery-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.zv3-gallery-col--2 { margin-top: 72px; }
.zv3-gallery-col--3 { margin-top: 36px; }

.zv3-gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
  display: block;
  outline: none;
  touch-action: manipulation;
}
.zv3-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s var(--ease-luxury);
}
.zv3-gallery-item:hover img,
.zv3-gallery-item:focus-visible img { transform: scale(1.04); }
.zv3-gallery-item__gold {
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.55s ease;
}
.zv3-gallery-item:hover .zv3-gallery-item__gold,
.zv3-gallery-item:focus-visible .zv3-gallery-item__gold { width: 100%; }

/* Gallery CTA */
.zv3-gallery-cta {
  text-align: center;
  padding: 80px clamp(24px, 6vw, 80px) 120px;
  background: var(--ivory);
  border-top: 1px solid rgba(184, 154, 92, 0.15);
}
.zv3-gallery-cta__rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 28px;
}
.zv3-gallery-cta__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-bottom: 36px;
}
.zv3-gallery-cta__link {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  position: relative;
}
.zv3-gallery-cta__link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s ease;
}
.zv3-gallery-cta__link:hover::after { width: 100%; }

/* Footer logos strip */
.zv3-footer__logos {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid rgba(245, 241, 234, 0.08);
}
.zv3-footer__logos img {
  height: 44px;
  width: auto;
  object-fit: contain;
  opacity: 0.72;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
}
.zv3-footer__logos img:hover { opacity: 1; }

/* =============================================================
   14. LIGHTBOX
============================================================= */
.zv3-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(21, 17, 15, 0.97);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.zv3-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
.zv3-lightbox__img-wrap {
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zv3-lightbox__img {
  max-width: 90vw;
  max-height: 86vh;
  object-fit: contain;
  transition: opacity 0.22s ease;
}
.zv3-lightbox__img.is-loading { opacity: 0; }
.zv3-lightbox__close,
.zv3-lightbox__prev,
.zv3-lightbox__next {
  position: absolute;
  background: none;
  border: none;
  color: rgba(245, 241, 234, 0.55);
  cursor: pointer;
  padding: 12px;
  transition: color 0.3s ease;
  line-height: 1;
}
.zv3-lightbox__close:hover,
.zv3-lightbox__prev:hover,
.zv3-lightbox__next:hover { color: var(--gold); }
.zv3-lightbox__close {
  top: 24px; right: 28px;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.zv3-lightbox__prev {
  left: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 2.2rem;
  font-weight: 200;
}
.zv3-lightbox__next {
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 2.2rem;
  font-weight: 200;
}
.zv3-lightbox__counter {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.30em;
  color: rgba(245, 241, 234, 0.32);
  text-transform: uppercase;
}

@media ( max-width: 768px ) {
  .zv3-gallery-grid { flex-direction: column; }
  .zv3-gallery-col--2,
  .zv3-gallery-col--3 { margin-top: 0; }
  .zv3-lightbox__prev { left: 4px; }
  .zv3-lightbox__next { right: 4px; }
  .zv3-lightbox__prev,
  .zv3-lightbox__next { padding: 20px 16px; font-size: 2.6rem; }
  .zv3-lightbox__close { top: 12px; right: 12px; padding: 16px 20px; font-size: 0.65rem; }
}