/* ═════════════════════════════════════════════════════════════════
   GREG THE JEWELER — LUXURY VISUAL SYSTEM (LVS) v1.1
   The shared visual foundation: background engine, ambient lighting,
   image masking, scroll reveals, section blending, motion tokens.

   Include on every page (current and future):
     <link rel="stylesheet" href="/lvs.css">
     <script src="/lvs.js" defer></script>

   Every content image automatically inherits feathered edges and
   ambient light via lvs.js — no per-image work needed.

   ENGINEERING NOTE (v1.1): feather masks are applied to a wrapper
   element (.lvs-frame) that lvs.js creates around each image —
   mask-image directly on <img> elements silently fails to render
   in Chromium on these pages, while the identical mask on a
   wrapper renders correctly. Do not move masks back onto <img>.

   PORTABILITY (Mind Sovereign / Olympus): the brand is isolated in
   the tokens below. Re-skin by changing tokens only; the engines
   (background, ambient, masking, reveal, easing) stay identical.
   ═════════════════════════════════════════════════════════════════ */

:root{
  /* ── brand tokens (swap per brand) ── */
  --lvs-vault:#050403;            /* deepest ground */
  --lvs-umber:#0e0a06;            /* warm black */
  --lvs-espresso:#140e08;         /* dark brown undertone */
  --lvs-glow:211,176,120;         /* ambient light color (champagne gold) */

  /* ── motion tokens ── */
  --lvs-ease:cubic-bezier(.22,.61,.21,1);
  --lvs-dur-fast:.5s;
  --lvs-dur:1.05s;
  --lvs-dur-slow:1.6s;

  /* ── spacing rhythm ── */
  --lvs-space-1:.75rem; --lvs-space-2:1.5rem;
  --lvs-space-3:3rem;   --lvs-space-4:6rem;
}

/* ── BACKGROUND ENGINE ─────────────────────────────────────────────
   Layered warm darkness instead of flat black: gold light pooling
   high, charcoal-brown depth low. Sits behind every section.       */
body{
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(var(--lvs-glow),.05), transparent 62%),
    radial-gradient(1000px 900px at 10% 30%, rgba(20,14,8,.5), transparent 72%),
    radial-gradient(1400px 900px at 55% 115%, #0b0805, transparent 74%),
    linear-gradient(180deg, #070503 0%, var(--lvs-vault) 30%, #060404 66%, #080503 100%)
    !important;
}

/* ── SECTION BLENDING ──────────────────────────────────────────────
   A faint light pool crowns each room so sections melt together —
   no hard horizontal breaks.                                       */
.room{position:relative}
.room::before{
  content:"";position:absolute;inset:0 0 auto 0;height:36%;
  pointer-events:none;z-index:0;
  background:radial-gradient(54% 100% at 50% 0%, rgba(var(--lvs-glow),.025), transparent 78%);
}

/* ── IMAGE MASKING (ImageFrame / ImageFadeMask) ────────────────────
   lvs.js wraps each content image in .lvs-frame; the frame carries
   the feather so the photo dissolves into the environment.
   Utility classes may also be placed on any wrapper by hand.       */
.lvs-frame{display:block;position:relative}
.lvs-frame img{display:block}
.lvs-feather{
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%, #000 40%, rgba(0,0,0,.9) 46%, transparent 52%);
          mask-image:radial-gradient(ellipse 100% 100% at 50% 50%, #000 40%, rgba(0,0,0,.9) 46%, transparent 52%);
}
.lvs-frame-hero{
  -webkit-mask-image:radial-gradient(ellipse 100% 104% at 50% 47%, #000 32%, rgba(0,0,0,.8) 42%, transparent 50%);
          mask-image:radial-gradient(ellipse 100% 104% at 50% 47%, #000 32%, rgba(0,0,0,.8) 42%, transparent 50%);
}
.imageFadeTop{-webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%);
                      mask-image:linear-gradient(to bottom, transparent, #000 22%)}
.imageFadeBottom{-webkit-mask-image:linear-gradient(to top, transparent, #000 22%);
                         mask-image:linear-gradient(to top, transparent, #000 22%)}
.imageFadeSides{-webkit-mask-image:linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
                        mask-image:linear-gradient(to right, transparent, #000 16%, #000 84%, transparent)}
.imageVignette{-webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%, #000 42%, rgba(0,0,0,.85) 47%, transparent 54%);
                       mask-image:radial-gradient(ellipse 100% 100% at 50% 50%, #000 42%, rgba(0,0,0,.85) 47%, transparent 54%)}

/* ── AMBIENT LIGHTING ENGINE (AmbientGlow) ─────────────────────────
   A nearly invisible warm glow behind imagery. lvs.js adds
   .lvs-ambient to each frame's host — outside the mask, so the
   halo survives the feather. .imageAmbient for manual use.         */
.lvs-ambient,.imageAmbient{position:relative;isolation:isolate}
.lvs-ambient::before,.imageAmbient::before{
  content:"";position:absolute;inset:-12%;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 50% at 50% 46%, rgba(var(--lvs-glow),.07), transparent 72%);
  filter:blur(16px);
}

/* ── HERO TREATMENT ────────────────────────────────────────────────
   lvs.js wraps the hero image in .lvs-frame-hero (deep four-side
   dissolve). The halo lives on .hero-ring, outside the mask.       */
.hero-ring{position:relative;isolation:isolate}
.hero-ring::after{
  content:"";position:absolute;inset:-12% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 46% at 50% 46%, rgba(var(--lvs-glow),.10), transparent 70%);
  filter:blur(20px);
}

/* ── SCROLL REVEAL (ScrollReveal) ──────────────────────────────────
   Cinematic entry: fade + rise + settle from 1.025 scale.
   GSAP pages (html.lvs-gsap) keep their own timeline reveals.      */
html:not(.lvs-gsap) .reveal{
  opacity:0;transform:translateY(22px) scale(1.025);
  transition:opacity var(--lvs-dur) var(--lvs-ease), transform var(--lvs-dur) var(--lvs-ease);
  will-change:opacity,transform;
}
html:not(.lvs-gsap) .reveal.in{opacity:1;transform:none}

/* ── HOVER LIFE ────────────────────────────────────────────────────
   Linked imagery breathes on pointer hover — desktop only.         */
@media (hover:hover) and (pointer:fine){
  a .lvs-frame img{transition:transform 1.3s var(--lvs-ease)}
  a:hover .lvs-frame img,a:focus-visible .lvs-frame img{transform:scale(1.018)}
}

/* ── ACCESSIBILITY ─────────────────────────────────────────────────
   Reduced motion: everything lands settled and still.              */
html.no-motion .reveal{opacity:1 !important;transform:none !important;transition:none !important}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}


/* ── CONSULTATION-FIRST ────────────────────────────────────────────
   Supporting copy under every consultation CTA, and the floating
   'Book a Private Consultation' button (lvs.js shows it after ~27%
   scroll; hidden near the on-page booking form and on /book).      */
.consult-sub{margin-top:1.1rem;font-size:.78rem;letter-spacing:.06em;color:rgba(168,159,146,.85);line-height:1.7}
.lvs-consult{position:fixed;right:clamp(1rem,3vw,2.4rem);bottom:clamp(1rem,3vh,2rem);z-index:70;
  border:1px solid rgba(230,196,140,.6);color:#e6c48c;background:rgba(5,4,3,.9);
  padding:1.05rem 1.7rem;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .6s var(--lvs-ease),transform .6s var(--lvs-ease),background .4s ease;
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
.lvs-consult.on{opacity:1;transform:none;pointer-events:auto}
.lvs-consult:hover,.lvs-consult:focus-visible{background:rgba(211,176,120,.14)}
@media (max-width:700px){.lvs-consult{left:1rem;right:1rem;text-align:center;bottom:calc(.9rem + env(safe-area-inset-bottom))}}
html.no-motion .lvs-consult{transition:none}


/* ── READABILITY PASS (Founder 2026-07-07): the champagne text was too
   dark and too small. Brighter token + slight size lift, everywhere. ── */
html:root{--champagne:#e6c48c}
html .eyebrow{font-size:.76rem}
html .field label{font-size:.68rem}
html .solid-cta{font-size:.74rem}
html .quiet-cta{font-size:.74rem}
html .jplate figcaption{font-size:.84rem}
html .cc-cta{font-size:.68rem}
html .bk-chip{font-size:.72rem}
html .bk-progress{font-size:.66rem}
html .bk-day span{font-size:.64rem}
html .bk-review span{font-size:.64rem}
html #bkBarStep{font-size:.64rem}
html .placard b{font-size:.7rem}
html .arch-cards em{font-size:.64rem}
html .wg-points div b{font-size:.66rem}
html .cats span{font-size:.8rem}
html .consult-sub{font-size:.82rem;color:rgba(196,186,170,.95)}


/* ── FINAL POLISH (Founder 2026-07-07): Readability II + form language ──
   Supporting copy: slightly larger, regular weight (was 300), lighter
   warm-gray for contrast, looser leading. Hero typography untouched.   */
html body{font-weight:400}
html:root{--gallery:#b3aa9c}
html .room-copy{font-size:1.12rem;line-height:1.8}
html .consult-sub{font-size:.88rem;color:rgba(205,196,180,.95);margin-top:1.3rem}
html .visit-note{font-size:.85rem;color:rgba(196,188,173,.85);line-height:1.75}
html .jplate figcaption{font-size:.9rem}
html .piece p{font-size:1.05rem;line-height:1.75}
html .arch-cards p{font-size:1rem;line-height:1.75}
html .metal-cards p{font-size:.88rem;line-height:1.65}
html .wg-points div p{font-size:.95rem;line-height:1.7}
html .steps div p{font-size:1rem;line-height:1.72}
html .step p{font-size:1rem;line-height:1.72}
html .field label{font-size:.72rem}
html .bk-hint{font-size:1rem}
html .rw-line{font-size:1.05rem}
html .dt-line{font-size:.95rem}
html .v-line{font-size:.92rem;line-height:1.68}
/* one CTA language: large, elegant, generous */
html .solid-cta{padding:1.15rem 2.4rem}
/* consultation request form (shared component language) */
.v-chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.9rem}
.v-chip{border:1px solid rgba(230,196,140,.2);padding:.85rem 1.15rem;min-height:48px;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gallery);background:none;cursor:pointer;
  transition:border-color .4s ease,background .4s ease,color .4s ease}
.v-chip[aria-pressed="true"]{border-color:#e6c48c;color:#f2ece1;background:rgba(230,196,140,.09)}
.visit-form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(211,176,120,.22);
  color:#f2ece1;font:inherit;font-size:1.02rem;padding:.5rem 0 .8rem;min-height:84px;resize:vertical}
.visit-form textarea:focus{outline:none;border-color:#e6c48c}
.v-err{color:#d3a078;font-size:.88rem;min-height:1.2em;margin:0}
.v-thanks{font-family:var(--display,Georgia,serif);font-weight:400;color:#f2ece1;
  font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.5}

/* hard guarantee: no horizontal drift from ambient glows (sticky-safe clip) */
html{overflow-x:clip}