/* ============================================================
   VESANNE — Editorial layer "Catalogue Raisonné"
   The devices that make Vesanne unmistakable: the fur-filled
   wordmark veil, oversized plates, ghost numerals, arched
   portals, the slow marquee, engraved frames, film grain.
   Loads AFTER vesanne.css on every page.
   ============================================================ */

/* ---------- Film grain (whole page, very faint) ---------- */
.vse-grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- Entrance veil (Home) ---------- */
.vse-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--vs-noir-deep);
  cursor: pointer;
  transition: opacity 900ms var(--vs-ease), visibility 0s linear 900ms;
}
.vse-veil.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.vse-veil__word {
  animation: vse-veilIn 1400ms var(--vs-ease) both;
}
.vse-veil__sub {
  font-size: clamp(8.5px, 1.3vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  text-transform: uppercase;
  color: var(--vs-champagne);
  white-space: nowrap;
  animation: vse-veilIn 1400ms var(--vs-ease) 220ms both;
}
@keyframes vse-veilIn {
  from { opacity: 0; letter-spacing: 0.3em; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vse-veil { display: none; }
}

/* ---------- Fur-filled display type ---------- */
.vse-furword {
  font-family: var(--vs-serif);
  font-weight: 600;
  font-size: clamp(74px, 15.5vw, 250px);
  line-height: 0.92;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-transform: uppercase;
  text-align: center;
  background-image: url('../../assets/img/materials/band-sable-closed.jpg');
  background-size: cover;
  background-position: center 40%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.vse-furword--veil { font-size: clamp(64px, 11vw, 180px); letter-spacing: 0.22em; text-indent: 0.22em; }

/* Full-width fur-word section */
.vse-furband {
  position: relative;
  padding: clamp(56px, 9vh, 120px) 0;
  background: var(--vs-noir-deep);
  overflow: hidden;
}
.vse-furband__inner { display: grid; gap: 20px; justify-items: center; }
.vse-furband__caption {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vs-ivory-faint);
}
.vse-furband__caption i { font-family: var(--vs-serif); font-style: italic; font-size: 15px; color: var(--vs-champagne); letter-spacing: 0.08em; text-transform: none; }

/* ---------- Slow marquee ---------- */
.vse-marquee {
  overflow: hidden;
  border-top: 1px solid var(--vs-noir-line-soft);
  border-bottom: 1px solid var(--vs-noir-line-soft);
  padding: 15px 0;
  background: var(--vs-noir);
}
.vse-marquee--pearl { background: var(--vs-pearl); border-color: var(--vs-pearl-line-soft); }
.vse-marquee__track {
  display: flex;
  gap: 72px;
  width: max-content;
  animation: vse-marq 70s linear infinite;
}
.vse-marquee__track > span {
  display: flex;
  align-items: baseline;
  gap: 72px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--vs-ivory-faint);
  white-space: nowrap;
}
.vse-marquee--pearl .vse-marquee__track > span { color: var(--vs-ink-faint); }
.vse-marquee__track i { font-family: var(--vs-serif); font-style: italic; color: var(--vs-champagne); font-size: 13px; letter-spacing: 0.1em; text-transform: none; }
@keyframes vse-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vse-marquee__track { animation: none; } }

/* ---------- Arched portals ---------- */
.vse-arch img, .vse-arch image-slot, img.vse-arch {
  border-radius: 999px 999px 0 0;
}
.vse-arch--self { border-radius: 999px 999px 0 0; }
.vse-furword--long { font-size: clamp(44px, 8.5vw, 140px); letter-spacing: 0.14em; text-indent: 0.14em; }
.vse-arch--frame { position: relative; }
.vse-arch--frame::after {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1px solid var(--vs-champagne-line);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}

/* ---------- Ghost numerals / etched words ---------- */
.vse-ghost {
  position: absolute;
  font-family: var(--vs-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(180px, 26vw, 400px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 180, 137, 0.22);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.vse-ghost--pearl { -webkit-text-stroke-color: rgba(233, 224, 207, 0.12); }
.vse-onto { position: relative; }
.vse-onto > *:not(.vse-ghost) { position: relative; z-index: 1; }

/* ---------- Vertical side label ---------- */
.vse-vertical {
  position: absolute;
  right: clamp(18px, 2.6vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(236, 229, 215, 0.55);
  display: flex;
  align-items: center;
  gap: 16px;
}
.vse-vertical::before {
  content: '';
  width: 1px;
  height: 74px;
  background: var(--vs-champagne-line);
}
@media (max-width: 960px) { .vse-vertical { display: none; } }

/* ---------- Hero cinema ---------- */
.vs-hero__bg img { animation: vse-heroZoom 6.5s var(--vs-ease) both; }
@keyframes vse-heroZoom { from { transform: scale(1.075); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vs-hero__bg img { animation: none; } }

.vse-hero-display {
  font-family: var(--vs-serif);
  font-weight: 600;
  font-size: clamp(52px, 7.4vw, 132px);
  line-height: 0.99;
  letter-spacing: 0.002em;
  text-wrap: balance;
}
.vse-hero-display em { font-style: italic; font-weight: 500; color: var(--vs-champagne-bright); }
.vse-hero-display .vse-line2 { display: block; padding-left: clamp(40px, 7vw, 150px); }

/* ---------- Plate numbering (catalogue raisonné) ---------- */
.vse-plates { counter-reset: vse-plate; }
.vse-plates .vs-card { counter-increment: vse-plate; }
.vse-plates .vs-card__body::before {
  content: 'Pl. ' counter(vse-plate, upper-roman);
  font-family: var(--vs-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--vs-champagne);
}
.vs-section--pearl .vse-plates .vs-card__body::before,
.vs-section--pearl-raised .vse-plates .vs-card__body::before { color: var(--vs-champagne); }

/* ---------- Editorial staggered preview grid (Home) ---------- */
.vse-editgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
.vse-editgrid > .vs-card:nth-child(1) { grid-column: 1 / 8; }
.vse-editgrid > .vs-card:nth-child(2) { grid-column: 9 / 13; padding-top: clamp(60px, 9vw, 150px); }
.vse-editgrid > .vs-card:nth-child(3) { grid-column: 2 / 6; padding-top: clamp(28px, 4vw, 64px); }
.vse-editgrid > .vs-card:nth-child(4) { grid-column: 7 / 12; margin-top: clamp(-90px, -6vw, -30px); }
.vse-editgrid > .vs-card:nth-child(1) .vs-card__media { aspect-ratio: 4 / 5; }
.vse-editgrid > .vs-card:nth-child(4) .vs-card__media { aspect-ratio: 5 / 6; }
@media (max-width: 960px) {
  .vse-editgrid { grid-template-columns: 1fr 1fr; }
  .vse-editgrid > .vs-card:nth-child(n) { grid-column: auto; padding-top: 0; margin-top: 0; }
}
@media (max-width: 640px) { .vse-editgrid { grid-template-columns: 1fr; } }

/* ---------- Engraved plate frame (certificate & co.) ---------- */
.vse-engraved { position: relative; }
.vse-engraved::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid var(--vs-noir-line-soft);
  pointer-events: none;
}

/* ---------- Atelier row swatches ---------- */
.vse-swatch {
  width: 58px;
  height: 72px;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
  align-self: center;
}
.vs-atrow--swatch {
  grid-template-columns: 110px 76px 1fr 1.9fr auto;
  align-items: center;
}
@media (max-width: 1120px) {
  .vs-atrow--swatch { grid-template-columns: 70px 66px 1fr auto; }
  .vs-atrow--swatch .vs-atrow__desc { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .vs-atrow--swatch { grid-template-columns: 64px 1fr; }
  .vs-atrow--swatch .vs-atrow__num { grid-column: 2; }
  .vs-atrow--swatch .vs-atrow__desc { grid-column: 1 / -1; grid-row: auto; }
  .vs-atrow--swatch .vs-atrow__since { grid-column: 1 / -1; }
}

/* ---------- Digital atelier duo (Home) ---------- */
.vse-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 2.8vw, 44px);
}
.vse-duo__panel {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  justify-items: start;
  padding: clamp(26px, 3.2vw, 48px);
  border: 1px solid var(--vs-noir-line);
  background:
    radial-gradient(130% 130% at 50% 0%, rgba(201, 162, 79, 0.07), transparent 60%),
    var(--vs-noir-raised);
}
.vse-duo__num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--vs-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--vs-champagne);
}
.vse-duo__media { width: 100%; }
.vse-duo__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 999px 999px 0 0; }
.vse-duo__panel h3 { font-family: var(--vs-serif); font-size: clamp(26px, 2.4vw, 35px); font-weight: 600; }
.vse-duo__panel h3 em { font-style: italic; color: var(--vs-champagne-bright); }
.vse-duo__panel p { font-size: 15.5px; line-height: 1.75; color: var(--vs-ivory-soft); max-width: 44ch; }
@media (max-width: 960px) { .vse-duo { grid-template-columns: 1fr; } }

/* ---------- Etched studies (cut drawings inverted to engraving) ---------- */
.vse-etch {
  filter: invert(0.93) sepia(0.42) saturate(1.5) hue-rotate(-14deg) brightness(0.9) contrast(1.05);
}

/* ---------- Candlelight glow for dark statements ---------- */
.vse-candle {
  background:
    radial-gradient(58% 68% at 50% 42%, rgba(201, 180, 137, 0.10), transparent 70%),
    var(--vs-noir-deep);
}

/* ---------- Oversized page-head numerals ---------- */
.vse-pagehead-display {
  font-family: var(--vs-serif);
  font-weight: 600;
  font-size: clamp(46px, 6.2vw, 108px);
  line-height: 0.99;
  letter-spacing: 0.002em;
  text-wrap: balance;
}
.vse-pagehead-display em { font-style: italic; font-weight: 500; color: var(--vs-champagne-bright); }