/* ════════════════════════════════════════════════════════════════════════
   Maison Vitrina — PAGE AESTHETIC (Cohere structure × Cartier editorial)
   Luxury editorial: warm white, deep gold, Cormorant Garamond display over
   Inter body, JetBrains Mono eyebrows. Distinct from Eximius's cream/vermilion.
   (Motion mechanics live in vitrina-motion.css; physics in vitrina-motion.js.)
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Palette: Signature */
  --bg: #faf8f5;
  --bg-2: #f0ece5;
  --ink: #1a1612;
  --ink-sub: #6b5f54;
  --accent: #8b6914;
  --accent-2: #c9a96e;
  --line: rgba(26,22,18,0.12);
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Typography System */
  --font-display: Cormorant Garamond;
  --font-body: Inter;
  --font-mono: JetBrains Mono;

  /* Spacing & Layout */
  --nav-h:       72px;
  --section-pad: 120px;
  --container:   1200px;
  --radius: 2px;
  --radius-lg: 10px;
  --transition:  .3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; }

.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-sub);
}
.display { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.02; }
.accent { color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════
   HERO — full-bleed editorial, curtain reveal, Ken Burns, grain
   ════════════════════════════════════════════════════════════════════════ */
.hero { position: relative; height: 100vh; overflow: hidden; background: var(--ink); }
.hero__img {
  position: absolute; inset: -4% -4% -4% -4%;   /* bleed so Ken Burns pan never shows an edge */
  width: 108%; height: 108%; object-fit: cover; z-index: 0; will-change: transform;
}
/* dark editorial scrim so any picsum image reads dramatic + the type is legible */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,10,8,0.55) 0%, rgba(12,10,8,0.15) 38%, rgba(12,10,8,0.65) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(12,10,8,0.45) 100%);
}
/* film-grain overlay — CSS-only inline SVG noise, GPU-cheap */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* curtain panels — two solid halves that part on load (clip-path animated in JS).
   z-index 6 so they cover EVERYTHING (incl. the hero text) until they part. */
.hero__panels { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hero__panel { position: absolute; inset: 0; background: var(--ink); }
.hero__panel--top    { clip-path: inset(0 0 50% 0); }
.hero__panel--bottom { clip-path: inset(50% 0 0 0); }

.hero__content { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; }
.hero__content .wrap { width: 100%; }
.hero__eyebrow { color: rgba(250,248,245,0.75); margin-bottom: 30px; }
.hero__headline { color: #faf8f5; font-size: clamp(3.4rem, 9vw, 8.5rem); font-weight: 300; letter-spacing: 0.01em; }
.hero__headline em { font-style: italic; color: var(--accent-2); }
.hero__scrollcue { position: absolute; bottom: 40px; left: 0; right: 0; text-align: center; z-index: 5; color: rgba(250,248,245,0.6); }

/* ════════════════════════════════════════════════════════════════════════
   CATEGORY NAV — sticky, Cartier-elegant, DrawSVG underline
   ════════════════════════════════════════════════════════════════════════ */
.cat-nav {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.cat-nav__inner { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 22px 48px; }
.cat-item {
  position: relative; flex: 0 0 auto; cursor: pointer;
  padding: 8px 26px 18px; background: none; border: 0;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--ink-sub);
  letter-spacing: 0; white-space: nowrap;
  transition: color 0.4s ease, letter-spacing 0.4s cubic-bezier(.2,.8,.2,1);
}
.cat-item:hover { color: var(--ink); letter-spacing: 0.04em; }
.cat-item.is-active { color: var(--accent); letter-spacing: 0.04em; }   /* gold text on active */
/* the drawn underline lives in an SVG so DrawSVG can animate the stroke */
.cat-item__line { position: absolute; left: 14px; right: 14px; bottom: 9px; height: 5px; overflow: visible; }
.cat-item__line line { stroke: var(--accent); stroke-width: 3; }

/* ════════════════════════════════════════════════════════════════════════
   PRODUCT GRID — Flip transitions, tilt, idle drift
   ════════════════════════════════════════════════════════════════════════ */
.grid-section { padding: 90px 0 120px; margin-bottom: 0; position: relative; background: var(--bg); overflow: visible; }
.grid-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 56px; }
.grid-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4vw, 3.2rem); }
.grid-head .count { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-sub); letter-spacing: 0.2em; }

.vit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; perspective: 1200px; min-height: 600px; overflow: visible; }
@media (max-width: 1100px) { .vit-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .vit-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
/* [flip_fix] FLATTEN the 3D perspective context during the Flip transition, so
   cards translating across the grid aren't perspective-skewed (which clipped a
   dark box over them). Restored on Flip complete. */
.vit-grid.is-flipping { perspective: none; }
.vit-grid.is-flipping .vit-card { transform-style: flat; }

.vit-card { position: relative; cursor: pointer; transform-style: preserve-3d; will-change: transform; }
.vit-card.is-hidden { display: none; }
.vit-card__frame {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  background: var(--bg-2); border-radius: 2px;
  box-shadow: 0 10px 30px -20px rgba(26,22,18,0.4);
  transition: box-shadow 0.35s ease;
}
.vit-card__img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; background-color: var(--bg-2); background-size: cover; background-position: center; will-change: transform; }
.vit-card:hover .vit-card__frame { box-shadow: 0 28px 60px -28px rgba(26,22,18,0.55); }
.vit-card__meta { padding: 18px 2px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vit-card__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
.vit-card:hover .vit-card__name { transform: translateY(-4px); }
.vit-card__cat { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-sub); }

/* ════════════════════════════════════════════════════════════════════════
   ABOUT THE HOUSE — gradient mesh bg, metric counters, editorial
   ════════════════════════════════════════════════════════════════════════ */
.about { position: relative; overflow: hidden; background: var(--bg-2); padding: 140px 0; }
/* living gradient mesh — two slow gold blobs in a wrapper the engine scroll-
   parallaxes (data-depth on .about__mesh); the blobs keyframe-float within it. */
.about__mesh { position: absolute; inset: -10% 0; z-index: 0; pointer-events: none; will-change: transform; }
.about__blob { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(80px); opacity: 0.14; }
.about__blob--a { background: radial-gradient(circle, var(--accent) 0%, transparent 70%); top: -10%; left: -10%; animation: vit-blob-a 22s ease-in-out infinite; }
.about__blob--b { background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%); bottom: -15%; right: -10%; animation: vit-blob-b 26s ease-in-out infinite; }
@keyframes vit-blob-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(12vw, 8vw); } }
@keyframes vit-blob-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10vw, -6vw); } }
.about__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .about__inner { grid-template-columns: 1fr; gap: 50px; } }
.about__text h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: 26px; line-height: 1.08; }
.about__text p { color: var(--ink-sub); font-size: 1.08rem; max-width: 52ch; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.metric { border-top: 1px solid var(--line); padding-top: 22px; }
.metric__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 6vw, 5rem); color: var(--accent); line-height: 1; transform-origin: left bottom; will-change: transform; }
.metric__label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-sub); margin-top: 12px; }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER — minimal
   ════════════════════════════════════════════════════════════════════════ */
footer { padding: 90px 0 70px; border-top: 1px solid var(--line); }
.foot-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.foot-mark { font-family: var(--font-display); font-weight: 400; font-size: 2rem; letter-spacing: 0.02em; }
.foot-contact { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--ink-sub); }

/* ════════════════════════════════════════════════════════════════════════
   DEPTH SPACER — gives the hero pin-stack room to recede before the catalog
   scrolls over it (opaque so it covers the receding hero layer).
   ════════════════════════════════════════════════════════════════════════ */
.depth-spacer { min-height: 60vh; position: relative; z-index: 2; background: var(--bg); }

/* ════════════════════════════════════════════════════════════════════════
   STORY STRIP — dark ink tonal-contrast moment (brand values)
   ════════════════════════════════════════════════════════════════════════ */
.story-strip { position: relative; background: var(--ink); color: var(--bg); padding: 80px 0; text-align: center; overflow: hidden; }
.story-strip__quote {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.12; max-width: 20ch; margin: 0 auto 50px; color: var(--bg);
}
.story-details { display: flex; justify-content: center; gap: 80px; flex-wrap: wrap; }
.story-detail { min-width: 120px; }
.story-detail__value { font-family: var(--font-display); font-weight: 300; font-size: 1.6rem; color: var(--bg); }
.story-detail__label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-2); margin-top: 10px; }

/* ════════════════════════════════════════════════════════════════════════
   FEATURED PIECE — asymmetric hero-product spotlight (~60/40)
   ════════════════════════════════════════════════════════════════════════ */
.featured { position: relative; z-index: 2; background: var(--bg); padding: 140px 0; overflow: hidden; }
.featured__inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 72px; align-items: center; }
@media (max-width: 900px) { .featured__inner { grid-template-columns: 1fr; gap: 44px; } }
.featured__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 2px; background: var(--bg-2); box-shadow: 0 34px 80px -44px rgba(26,22,18,0.5); }
.featured__media img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; background-color: var(--bg-2); will-change: transform; }
.featured__eyebrow { display: block; margin-bottom: 26px; }
.featured__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.04; margin-bottom: 26px; }
.featured__desc { color: var(--ink-sub); font-size: 1.1rem; max-width: 38ch; margin-bottom: 36px; }
.featured__cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.featured__cta .arrow { transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
.featured__cta:hover .arrow { transform: translateX(8px); }

/* ════════════════════════════════════════════════════════════════════════
   VITRINA ADDITIONS (Phase 3) — site nav, three-tier catalog text cards,
   sub-category row, EN/FR toggle. Palette-aware (uses the injected vars).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Top site navigation (multipage Barba — nav lives INSIDE each container) ─
   Three modes so a sticky nav never fights the sticky category nav:
     • base        — in normal flow (catalog page; scrolls away so .cat-nav owns top:0)
     • --over       — absolute over a full-bleed hero (index/contact), paired with .is-light
     • --solid      — sticky translucent bar (about/pricing; no competing sticky nav) */
.site-nav { position: relative; z-index: 300; color: var(--ink); }
.site-nav--over { position: absolute; top: 0; left: 0; right: 0; }
.site-nav--solid { position: sticky; top: 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); }
.site-nav__inner { max-width: 1320px; margin: 0 auto; padding: 26px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav__brand { font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; letter-spacing: 0.02em; color: inherit; }
.site-nav__links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.site-nav__link { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: inherit; opacity: 0.82; transition: opacity .3s, color .3s; }
.site-nav__link:hover, .site-nav__link.is-current { opacity: 1; color: var(--accent); }
.site-nav.is-light { color: #faf8f5; }
.site-nav.is-light .lang-toggle { border-color: rgba(250,248,245,0.4); }

/* ── EN/FR toggle (Vitrina only) ─────────────────────────────────────────
   The no-FOUC inline head script sets html.lang-en|lang-fr from localStorage;
   the engine wires the button. Generic strings carry .lang-en/.lang-fr spans;
   customer content is single-language (no spans → always shown). */
html.lang-en .lang-fr, html.lang-fr .lang-en { display: none !important; }
.lang-toggle { cursor: pointer; background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: inherit; transition: border-color .3s, color .3s; }
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── Sub-category row (tier 2) — sits inside the sticky category nav.
   Hidden when the active category has no sub-categories (2-level collapse). */
.subcat-nav { display: none; }
.subcat-nav.is-on { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 2px 48px 16px; }
.subcat-item { cursor: pointer; background: none; border: 0; font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-sub);
  padding: 6px 15px; border-radius: 999px; transition: color .3s, background .3s; }
.subcat-item:hover { color: var(--ink); }
.subcat-item.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ── Catalog TEXT cards (tier 3) — the parsed catalog gives item NAMES, not
   images, so each piece renders as an editorial name plate. Keeps the same
   .vit-card structure so Flip / tilt / idle drift all still apply. */
.vit-card__frame--text { display: grid; place-items: center; text-align: center; padding: 28px 22px;
  position: relative; overflow: hidden;
  background:
    /* faint diagonal gold "weave" — barely-there tactile texture (pure CSS, no image) */
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent) 0 1px, transparent 1px 12px),
    /* soft gold vignette glow from the top — echoes the about-page .about__mesh radial blobs */
    radial-gradient(135% 100% at 50% -12%, color-mix(in srgb, var(--accent-2) 22%, transparent) 0%, transparent 58%),
    /* existing cream base gradient (unchanged) */
    linear-gradient(155deg, var(--bg-2) 0%, color-mix(in srgb, var(--accent-2) 14%, var(--bg-2)) 100%);
  border: 1px solid var(--line); }
/* thin gold corner brackets — a refined "vitrine display card" frame; low-opacity, tucked in
   the corners so they never compete with the centred serif item name */
.vit-card__frame--text::before,  .vit-card__frame--text::after,
.vit-card__frame--framed::before, .vit-card__frame--framed::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 2; }
.vit-card__frame--text::before, .vit-card__frame--framed::before { top: 13px; left: 13px;
  border-top: 1.5px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-left: 1.5px solid color-mix(in srgb, var(--accent) 48%, transparent); }
.vit-card__frame--text::after, .vit-card__frame--framed::after { bottom: 13px; right: 13px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--accent) 48%, transparent); }
/* [catalog_temp 20260630] Image catalog card — the photo fills the frame, the approved gold
   corner brackets become the display-case frame over it; a soft top gold scrim ties it to the
   text card's vignette. The item name shows in the meta line below (shared base frame keeps the
   3/4 aspect, overflow + shadow). */
.vit-card__frame--framed { border: 1px solid var(--line); }
.vit-card--catalog .vit-card__name { font-family: var(--font-display); font-weight: 400; }
.vit-card__itemname { font-family: var(--font-display); font-weight: 400; color: var(--ink);
  font-size: clamp(1.3rem, 2.2vw, 1.95rem); line-height: 1.16; letter-spacing: 0; }
.vit-card--text .vit-card__name { display: none; }              /* frame already shows the name */
.vit-card--text .vit-card__meta { justify-content: center; padding-top: 14px; }
.vit-card--text .vit-card__cat { text-align: center; }

/* Hero image is painted as a BACKGROUND on a div (token-safe: empty {{HERO_IMAGE}}
   shows the dark hero ground, no broken-image icon). */
.hero__img { background-size: cover; background-position: center; background-color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════
   VITRINA — inner-page sections (catalog / about / pricing / contact)
   ════════════════════════════════════════════════════════════════════════ */

/* Page header band — sits below a --solid or in-flow nav (no full hero). */
.page-header { background: var(--bg); padding: 70px 0 40px; text-align: center; }
.page-header__eyebrow { display: block; margin-bottom: 20px; }
.page-header__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.01em; }
.page-header__sub { max-width: 56ch; margin: 22px auto 0; color: var(--ink-sub); font-size: 1.08rem; }

/* Lead paragraph (about) */
.page-lead { background: var(--bg); padding: 30px 0 90px; }
.page-lead__text { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.3; max-width: 26ch; color: var(--ink); }

/* Services trio (about) */
.services { background: var(--bg-2); padding: 110px 0; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
@media (max-width: 860px) { .services__grid { grid-template-columns: 1fr; gap: 36px; } }
.service { border-top: 1px solid var(--line); padding-top: 26px; }
.service__name { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; margin-bottom: 14px; }
.service__desc { color: var(--ink-sub); font-size: 1.02rem; }

/* Pricing */
.pricing { background: var(--bg); padding: 110px 0; }
.pricing__intro { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.3; max-width: 30ch; margin: 0 auto 60px; text-align: center; color: var(--ink); }
.price-range { display: flex; align-items: baseline; justify-content: center; gap: 22px; flex-wrap: wrap; }
.price-range__amt { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 8vw, 6rem); color: var(--accent); line-height: 1; }
.price-range__dash { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.4rem); color: var(--ink-sub); }
.pricing__detail { max-width: 52ch; margin: 44px auto 0; text-align: center; color: var(--ink-sub); font-size: 1.05rem; }

/* Contact details (under the contact hero) */
.contact-block { background: var(--bg); padding: 110px 0; }
.contact-grid { display: grid; gap: 40px; max-width: 760px; }
.contact-line { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.contact-line__label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-sub); }
.contact-line__value { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3.5vw, 2.4rem); color: var(--ink); transition: color .3s; }
a.contact-line__value:hover { color: var(--accent); }

/* CTA button */
.cta-row { text-align: center; margin-top: 56px; }
.cta-btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.74rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--bg); background: var(--accent);
  padding: 16px 32px; border-radius: var(--radius, 2px); transition: background .3s, transform .3s; }
.cta-btn:hover { background: var(--ink); transform: translateY(-2px); }