/* Vision page — interactive chapters (2026-09-30):
   02 flow channel (pointer-driven), 04 sticky "made by hand" process with
   line drawings, 05 oscilloscope that settles as you scroll. */

/* ---------- 02 · flow field: a black plate on white. Streams run through the
   channel; anxiety trembles, boredom lies still. Pointer = a small light. */
.vf{background:#fff;color:#0a0a0a;padding:130px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:center;}
.vf-copy{max-width:540px;justify-self:end;}
.vf-copy > p:not(.v-eyebrow):not(.vf-hint){margin:0;font-size:clamp(15.5px,1.15vw,18px);line-height:1.75;color:#4a4a4a;}
.vf-copy em{font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-size:1.3em;color:#0a0a0a;}
.vf-read{margin-top:48px;padding-top:32px;border-top:1px solid #e4e4e4;min-height:180px;}
.vf-state{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif !important;font-style:italic;font-size:clamp(58px,6vw,104px);line-height:1;letter-spacing:-.02em;color:#a5a5a5;transition:color .8s ease,opacity .35s ease,transform .5s cubic-bezier(.2,.7,.1,1),letter-spacing 1.2s cubic-bezier(.2,.7,.1,1);}
.vf.is-flow .vf-state{color:var(--copper);letter-spacing:.01em;}
.vf-desc{margin:18px 0 0;font-family:"Liberation Serif",Georgia,serif !important;font-style:italic;font-size:19px;line-height:1.55;color:#6a6a6a;max-width:430px;transition:opacity .35s ease;}
.vf-read.is-swap .vf-state{opacity:0;transform:translateY(8px);} .vf-read.is-swap .vf-desc{opacity:0;}
.vf-hint{margin:30px 0 0;font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#a0a0a0;}
.vf-hint-touch{display:none;}
@media (hover:none){.vf-hint-fine{display:none;}.vf-hint-touch{display:inline;}}
.vf-chart-wrap{width:min(100%,640px);justify-self:start;}
.vf-plate{position:relative;background:radial-gradient(ellipse 80% 70% at 50% 45%,#141414 0%,#050505 70%,#000 100%);padding:clamp(34px,4.4vw,64px) clamp(34px,4.4vw,64px) clamp(46px,5vw,74px) clamp(46px,5vw,74px);box-shadow:0 50px 90px -30px rgba(0,0,0,.55),0 20px 40px -20px rgba(0,0,0,.4);}
.vf-plate::before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.1);pointer-events:none;}
.vf-chart{position:relative;width:100%;aspect-ratio:1;cursor:none;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
@media (hover:none){.vf-chart{cursor:default;}}
.vf-cv{position:absolute;inset:0;width:100%;height:100%;display:block;}
.vf-z{position:absolute;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-size:clamp(20px,2vw,30px);color:rgba(255,255,255,.28);pointer-events:none;transition:color .8s ease;}
.vf-z-a{left:6%;top:6%;} .vf-z-b{right:6%;bottom:6%;}
.vf[data-state="anxiety"] .vf-z-a,.vf[data-state="boredom"] .vf-z-b{color:rgba(255,255,255,.85);}
.vf-ax{position:absolute;font-family:"Montserrat",sans-serif;font-size:9px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.vf-ax-x{right:0;bottom:-30px;}
.vf-ax-y{left:-30px;top:0;transform:rotate(-90deg) translateX(-100%);transform-origin:0 0;}
.vf-cite{margin:40px 0 0;font-family:"Liberation Serif",Georgia,serif !important;font-style:italic;font-size:14px;color:#9a9a9a;}

/* ---------- 03 · three elements (keeps .vn) ---------- */
.vn .vn-copy .v-h2{margin-bottom:0;}

/* ---------- 04 · made by hand: stacked full-screen chapters ---------- */
.vm{background:#000;}
.vm-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px 0;margin-bottom:-12vh;position:relative;z-index:2;background:transparent !important;background:#000;color:#fff;position:relative;}
.vm-intro .v-eyebrow{justify-content:center;}
.vm-title{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-weight:400;font-size:clamp(56px,8.4vw,150px);line-height:.95;letter-spacing:-.025em;}
.vm-title em{font-style:italic;color:rgba(255,255,255,.55);}
.vm-lede{margin:38px auto 0;max-width:520px;font-family:"Liberation Serif",Georgia,serif !important;font-style:italic;font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:rgba(255,255,255,.6);}
.vm-scroll{position:relative;display:block;margin-top:54px;width:1px;height:56px;background:rgba(255,255,255,.14);overflow:hidden;}
.vm-scroll i{position:absolute;left:0;top:0;width:1px;height:40%;background:#fff;animation:vmDrip 2.4s cubic-bezier(.6,0,.2,1) infinite;}
@keyframes vmDrip{from{transform:translateY(-100%);}to{transform:translateY(260%);}}
.vm-card{position:sticky;top:0;height:100vh;height:100svh;min-height:620px;overflow:hidden;}
.vm-inner{height:100%;display:grid;grid-template-columns:1.12fr 1fr;transform-origin:50% 0;will-change:transform,filter;}
.vm-dark .vm-inner{background:#000;color:#fff;} .vm-light .vm-inner{background:#fff;color:#0a0a0a;}
.vm-media{position:relative;overflow:hidden;}
.vm-media img{transition:transform 2.8s cubic-bezier(.2,.7,.1,1),opacity 1.4s ease;}
.vm-spot{background:radial-gradient(ellipse 60% 48% at 50% 50%,#2b2b2b 0%,#0c0c0c 55%,#000 100%);}
.vm-spot img{position:absolute;left:12%;top:14%;width:76%;height:72%;object-fit:contain;filter:brightness(1.12) contrast(1.05) drop-shadow(0 40px 50px rgba(0,0,0,.8));transform:scale(1.08);opacity:.2;}
.vm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.75) contrast(1.05);transform:scale(1.12);}
.vm-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.6) 100%);}
.vm-plinth{background:radial-gradient(ellipse 55% 30% at 50% 74%,rgba(0,0,0,.09),rgba(0,0,0,0) 70%),#fff;}
.vm-plinth img{position:absolute;left:10%;top:22%;width:80%;height:56%;object-fit:contain;filter:drop-shadow(0 34px 34px rgba(0,0,0,.22));transform:translateY(24px);opacity:0;}
.vm-card.is-on .vm-media img{transform:none;opacity:1;}
.vm-trace{background:radial-gradient(ellipse 60% 55% at 50% 50%,#1a1512 0%,#0a0908 55%,#000 100%);}
.vm-solder{position:absolute;inset:0;width:100%;height:100%;cursor:none;touch-action:pan-y;}
@media (hover:none){.vm-solder{cursor:default;}}
.vm-solder .parts *{fill:none;stroke:rgba(201,138,78,.4);stroke-width:1.2;stroke-linejoin:round;}
.vm-solder .parts .band{stroke:rgba(232,189,134,.55);stroke-width:2;}
.vm-solder .board{fill:#15110d;}
.vm-solder .board-edge{fill:none;stroke:rgba(201,138,78,.55);stroke-width:1;}
.vm-solder .pad{fill:#b07a45;}
.vm-solder .lead{fill:none;stroke:#a8a095;stroke-width:2.4;stroke-linecap:round;}
.vm-solder .fil{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);fill:url(#vsMolten);transition:transform .8s cubic-bezier(.3,1.4,.5,1),opacity .8s ease;}
.vm-solder .shine{fill:none;stroke:rgba(255,255,255,0);stroke-width:1.4;stroke-linecap:round;transition:stroke .8s ease;}
.vm-solder .jt.molten .fil{transform:scaleY(1);filter:drop-shadow(0 0 6px rgba(255,210,150,.9));}
.vm-solder .jt.done .fil{transform:scaleY(1);fill:url(#vsCool);}
.vm-solder .jt.done .shine{stroke:rgba(255,255,255,.7);}
.vm-solder .jt.fade .fil{opacity:0;} .vm-solder .jt.fade .shine{stroke:rgba(255,255,255,0);}
.vm-solder .heat{opacity:0;transition:opacity .5s ease,transform .9s cubic-bezier(.6,0,.2,1);}
.vm-solder.is-heat .heat{opacity:1;animation:vsFlicker .35s ease-in-out infinite alternate;}
@keyframes vsFlicker{from{opacity:.75;}to{opacity:1;}}
.vm-solder .iron{will-change:transform;}
.vm-solder .grip{fill:#0d0c0b;stroke:rgba(201,138,78,.6);stroke-width:1;}
.vm-solder .grip-r{fill:none;stroke:rgba(232,189,134,.8);stroke-width:1.4;}
.vm-solder .collar{fill:#2a2622;stroke:rgba(255,255,255,.25);stroke-width:.8;}
.vm-solder .shaft{fill:url(#vsShaft);}
.vm-solder .shaft-hl{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1;}
.vm-solder .tip{fill:#8a8178;}
.vm-solder .tip-glow{fill:#ffcf8a;opacity:0;transition:opacity .4s ease;}
.vm-solder.is-heat .tip-glow{opacity:.9;}
.vm-solder .wire path{fill:none;stroke:#cfc6b8;stroke-width:3.2;stroke-linecap:round;}
.vm-solder .smoke path{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:40 400;stroke-dashoffset:40;opacity:0;}
.vm-solder.is-heat .smoke path{animation:vsSmoke 1.6s ease-out infinite;}
.vm-solder.is-heat .smoke path:nth-child(2){animation-delay:.5s;} .vm-solder.is-heat .smoke path:nth-child(3){animation-delay:1s;}
@keyframes vsSmoke{0%{stroke-dashoffset:40;opacity:0;}20%{opacity:.9;}100%{stroke-dashoffset:-220;opacity:0;}}
.vm-pcb .vm-txt h3 em{color:#e8bd86;opacity:.85;}
.vm-txt{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(28px,7vw,120px) 0 clamp(28px,5vw,90px);}
.vm-idx{display:flex;align-items:center;gap:16px;margin:0 0 34px;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif !important;font-style:italic;font-size:22px;line-height:1;}
.vm-idx i{display:block;width:72px;height:1px;background:currentColor;opacity:.3;}
.vm-idx span:last-child{opacity:.4;}
.vm-txt h3{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-weight:400;font-size:clamp(46px,5vw,88px);line-height:.98;letter-spacing:-.02em;}
.vm-txt h3 em{font-style:italic;opacity:.5;}
.vm-txt > p:last-child{margin:34px 0 0;max-width:400px;font-size:clamp(15px,1.1vw,17px);line-height:1.8;padding-top:26px;border-top:1px solid currentColor;border-color:rgba(127,127,127,.3);}
.vm-dark .vm-txt > p:last-child{color:rgba(255,255,255,.66);} .vm-light .vm-txt > p:last-child{color:#555;}
.vm-txt > *{opacity:0;transform:translateY(22px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.7,.1,1);}
.vm-txt h3{transition-delay:.12s;} .vm-txt > p:last-child{transition-delay:.26s;}
.vm-card.is-on .vm-txt > *{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.vm-solder .smoke path{animation:none !important;}.vm-txt > *,.vm-media img{opacity:1 !important;transform:none !important;transition:none !important;}.vm-scroll i{animation:none;}}

/* ---------- 05 · oscilloscope ---------- */
.vl-scope{position:relative;max-width:1080px;height:clamp(180px,20vw,260px);margin:64px auto 0;border:1px solid rgba(255,255,255,.18);background:
  linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/10% 25%,
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/10% 25%,
  radial-gradient(ellipse 60% 70% at 50% 50%,rgba(255,255,255,.05),rgba(0,0,0,0) 70%),#050505;}
.vl-scope::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.12);}
.vl-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.vl-hud{position:absolute;font-family:"Montserrat",sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:8px;}
.vl-hud-tl{left:14px;top:12px;} .vl-hud-tr{right:14px;top:12px;} .vl-hud-bl{left:14px;bottom:12px;} .vl-hud-br{right:14px;bottom:12px;}
.vl-led{display:block;width:6px;height:6px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.6);box-shadow:none;transition:background .5s,box-shadow .5s;}
.vl.is-ok .vl-led{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8);}
.vl.is-ok .vl-status{color:#fff;}
.vl-meter{position:absolute;left:110px;right:70px;bottom:17px;height:1px;background:rgba(255,255,255,.12);}
.vl-meter i{position:absolute;left:0;top:-1px;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,rgba(255,255,255,.25),#fff);}
.vl .vl-big em{transition:text-shadow 1s ease;}
.vl.is-ok .vl-big em{text-shadow:0 0 40px rgba(232,189,134,.35);}

@media (prefers-reduced-motion:no-preference){
  [data-reveal] .vf-copy > p:not(.v-eyebrow),[data-reveal] .vf-read,[data-reveal] .vf-chart-wrap,[data-reveal] .vl-scope{opacity:0;transform:translateY(16px);transition:opacity 1.3s ease,transform 1.5s cubic-bezier(.2,.7,.1,1);}
  [data-reveal].is-in .vf-copy > p:not(.v-eyebrow),[data-reveal].is-in .vf-read,[data-reveal].is-in .vf-chart-wrap,[data-reveal].is-in .vl-scope{opacity:1;transform:none;}
  .vf.is-in .vf-chart-wrap{transition-delay:.2s;}
}
@media (prefers-reduced-motion:reduce){.vm-vis path{stroke-dashoffset:0;transition:none;}}

@media (max-width:900px){
  .vf{grid-template-columns:1fr;padding:80px 22px 90px;gap:44px;}
  .vf-plate{padding:26px 22px 44px 40px;}
  .vf-copy,.vf-chart-wrap{justify-self:stretch;max-width:none;}
  .vf-chart-wrap{width:auto;}
  .vf-read{min-height:150px;margin-top:34px;}
  .vf-desc{font-size:17px;}
  .vm-card{position:relative;height:auto;min-height:0;}
  .vm-inner{grid-template-columns:1fr;}
  .vm-media{height:78vw;}
  
  .vm-txt{padding:44px 22px 72px;}
  .vm-idx{margin-bottom:24px;}
  .vl-scope{margin-top:44px;height:170px;}
  .vl-hud{font-size:8.5px;letter-spacing:.2em;}
  .vl-meter{left:96px;right:48px;}
}

/* ---------- 01 · hero: living lake (WebGL ripples) + word-by-word reveal ---------- */
.vh-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;opacity:0;transition:opacity 1.6s ease;}
.vh.gl-on .vh-gl{opacity:1;}
.vh.gl-on .vh-bg{visibility:hidden;}
.vh-copy{transform:translateY(calc(var(--vs,0) * -120px));opacity:calc(1 - var(--vs,0) * 1.3);}
/* headline: each line is revealed by a soft-edged sweep, left to right, like
   ink flowing across the page. No blur filter (it clipped the italic f/h
   overhangs); the padding gives those overhangs room inside the mask. */
.vh-title .vh-line{display:inline-block;padding:.08em .22em .14em;margin:-.08em -.22em -.14em;}
@media (prefers-reduced-motion:no-preference){
  .vh-copy > .vh-title{animation:none;}
  .vh-title .vh-line{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 60%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 60%,transparent 100%);
    -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    transform:translateY(.12em);animation:vhSweep 2.4s cubic-bezier(.45,.05,.25,1) .4s forwards;}
  .vh-title .vh-line:last-child{animation-delay:1.1s;}
  .vh-copy > .vh-sub{animation-delay:2.1s;}
}
@keyframes vhSweep{to{-webkit-mask-position:0 0;mask-position:0 0;transform:none;}}

.vn{padding-bottom:90px !important;}
@media (max-width:900px){.vm-intro{padding:20px 22px 48px;margin-bottom:0;}.vn{padding-bottom:64px !important;}}
/* 03 · ghost behind "Drawn from nature." is the FLOW logo itself —
   logo-flow-ghost.png has the top-to-bottom fade baked into its alpha
   (a CSS mask fails when the page is opened straight from disk). */
.vn-ghost.vn-ghost-logo{left:50%;right:auto;top:48px;transform:translateX(-50%);width:min(86vw,1480px);height:auto;background:none;-webkit-mask:none;mask:none;}
@media (max-width:900px){.vn-ghost.vn-ghost-logo{top:40px;width:92vw;}}

/* Made by hand: the amplifiers (chapters I and IV) grow a touch under the cursor */
@media (hover:hover) and (pointer:fine){
  .vm-card.is-on .vm-spot img,.vm-card.is-on .vm-plinth img{transition:transform .9s cubic-bezier(.2,.7,.1,1),opacity 1.4s ease;}
  .vm-card.is-on .vm-spot:hover img,.vm-card.is-on .vm-plinth:hover img{transform:scale(1.07);}
}
/* hero: a little more air between the two headline lines so the italic f and h never touch */
.vh .vh-title{line-height:1.14;}
/* 09 · close: the invitation */
.vx .vx-big em{font-style:italic;color:var(--copper);}
.vx-sub{margin:30px auto 0;max-width:600px;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:clamp(15.5px,1.15vw,18px);line-height:1.75;color:#555;}

/* 02 · Anxiety / Boredom labels: a soft black pool behind each, so they read over the field */
.vf-z{padding:.2em .7em;margin:-.2em -.7em;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.92) 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,0) 100%);}

/* 04 · Made by hand: the second line of chapters III and IV in gold, like II */
.vm-card[data-k="2"] .vm-txt h3 em{color:#e8bd86;opacity:.9;}
.vm-card[data-k="3"] .vm-txt h3 em{color:var(--copper);opacity:1;}

/* 09 · Invitation — a sealed black-and-gilt envelope under a single warm
   spotlight. A small point of gold light travels its gilded edge; break the
   wax seal and the flap swings open on a copper-pinstripe lining, an ivory
   card rises out signed by the CEO, and the light moves on to trace the
   card's edge. The light itself is drawn by vision.js (see "gold light trace"). */
.vx.vx-inv{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 55%,#1a1510 0%,#070605 58%,#000 100%);color:#fff;text-align:center;padding:96px 24px 96px;}
.vi-spot{position:absolute;left:50%;top:-10%;width:min(1100px,140%);height:95%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 38% 62% at 50% 0%,rgba(232,189,134,.13) 0%,rgba(232,189,134,.05) 45%,rgba(232,189,134,0) 75%);}
.vi-eye{justify-content:center;position:relative;}
.vi-eye::before,.vi-eye::after{content:"";width:48px;height:1px;background:var(--copper);}
/* the stage hugs the envelope while closed, then grows to hold the card */
.vi-stage{--env-w:min(660px,calc((100vw - 48px) * .94));--env-y:calc(var(--env-w) / 3.2 + 26px);position:relative;margin:28px auto 0;width:min(760px,100%);
  height:calc(var(--env-w) / 1.6 + 110px);perspective:1800px;transition:height 1.1s cubic-bezier(.6,0,.2,1) .25s;}
.vx-inv.is-open .vi-stage{height:700px;}
.vi-env{position:absolute;left:50%;top:var(--env-y);width:var(--env-w);aspect-ratio:1.6;transform:translate(-50%,-50%);transform-style:preserve-3d;perspective:2600px;
  transition:transform 1.3s cubic-bezier(.6,0,.2,1) .9s,opacity 1.1s ease 1.1s;filter:drop-shadow(0 50px 70px rgba(0,0,0,.85)) drop-shadow(0 0 1px rgba(232,189,134,.25));}
.vi-back{position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 1px,rgba(255,255,255,0) 1px 3px),
  linear-gradient(160deg,#1a1510 0%,#0c0a08 60%,#070605 100%);
  border:1px solid rgba(201,138,78,.75);}
.vi-peek{position:absolute;left:7%;right:7%;top:8%;height:60%;background:linear-gradient(180deg,#f8f4ec,#efe8dc);transform:translateY(8%);transition:transform 1s cubic-bezier(.6,0,.2,1) .55s;display:flex;align-items:flex-start;justify-content:center;padding-top:7%;}
.vi-peek::before{content:"";position:absolute;inset:7px;border:1px solid rgba(153,102,50,.3);}
.vi-peek img{width:18%;height:auto;opacity:.85;}
.vi-front{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.vi-pocket{fill:url(#viPocket);}
.vi-line{fill:none;stroke:url(#viFoil);stroke-width:.4;vector-effect:non-scaling-stroke;}
.vi-front .vi-line{opacity:.55;}
.vi-flap{position:absolute;left:0;right:0;top:0;height:62%;transform-origin:50% 0;transform:rotateX(0deg);transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.6,0,.2,1) .35s;z-index:3;}
.vi-flap svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.vi-flap-in{transform:rotateX(180deg);}
.vi-flap-f{fill:url(#viFlapG);}
.vi-flap-out{filter:drop-shadow(0 6px 8px rgba(0,0,0,.55));}
/* gilt edge + a faint inner stationery rule, laid over flap and pocket */
.vi-env::before,.vi-env::after{content:"";position:absolute;pointer-events:none;z-index:4;transition:opacity .5s;}
.vi-env::before{inset:0;border:1px solid transparent;border-image:linear-gradient(120deg,#7d4f25,#f0cf9c 40%,#b47b44 60%,#6e451f) 1;}
.vi-env::after{inset:11px;border:1px solid rgba(201,138,78,.16);}
.vx-inv.is-open .vi-env::before,.vx-inv.is-open .vi-env::after{opacity:0;}
/* gilt corner ornaments */
.vi-corner{position:absolute;z-index:4;width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(135deg,#f0cf9c,#996632);box-shadow:0 0 6px rgba(232,189,134,.45);transition:opacity .5s;}
.vi-c1{left:-4px;top:-4px;}.vi-c2{right:-4px;top:-4px;}.vi-c3{right:-4px;bottom:-4px;}.vi-c4{left:-4px;bottom:-4px;}
.vi-floor{position:absolute;left:50%;top:calc(var(--env-y) + var(--env-w) / 3.2 - 20px);width:min(620px,90%);height:90px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(232,189,134,.12),rgba(232,189,134,0) 70%);filter:blur(6px);transition:opacity 1s ease 1s;}
/* the wax seal */
.vi-seal{position:absolute;left:50%;top:var(--env-y);z-index:5;width:108px;height:108px;margin:-56px 0 0 -54px;border:0;border-radius:50%;cursor:pointer;padding:0;
  background:radial-gradient(circle at 36% 30%,#f0cf9c 0%,#c08a52 30%,#8a5a2c 64%,#5c3818 100%);
  box-shadow:0 14px 30px rgba(0,0,0,.7),inset 0 2px 3px rgba(255,240,215,.45),inset 0 -5px 10px rgba(0,0,0,.4);
  transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .5s ease,box-shadow .5s ease;animation:viPulse 3.2s ease-in-out infinite;}
.vi-seal::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,#9a6634 56%,rgba(154,102,52,0) 72%);z-index:-1;
  clip-path:polygon(50% 0,61% 8%,74% 3%,80% 16%,94% 18%,92% 32%,100% 42%,93% 54%,99% 67%,87% 74%,86% 88%,72% 89%,63% 100%,50% 93%,37% 100%,28% 89%,14% 88%,13% 74%,1% 67%,7% 54%,0 42%,8% 32%,6% 18%,20% 16%,26% 3%,39% 8%);}
.vi-seal-in{position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(255,235,205,.4);box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 1px 0 rgba(255,235,205,.2);display:flex;align-items:center;justify-content:center;}
.vi-seal-in img{width:62%;height:auto;filter:brightness(0) opacity(.6);mix-blend-mode:multiply;}
.vi-seal:hover{transform:scale(1.06);}
.vi-seal:focus-visible{outline:1px solid #e8bd86;outline-offset:8px;}
@keyframes viPulse{0%,100%{box-shadow:0 14px 30px rgba(0,0,0,.7),inset 0 2px 3px rgba(255,240,215,.45),inset 0 -5px 10px rgba(0,0,0,.4),0 0 0 0 rgba(232,189,134,0);}
  50%{box-shadow:0 14px 30px rgba(0,0,0,.7),inset 0 2px 3px rgba(255,240,215,.45),inset 0 -5px 10px rgba(0,0,0,.4),0 0 0 16px rgba(232,189,134,.07);}}
.vi-hint{position:absolute;left:0;right:0;top:calc(100% + 30px);margin:0;white-space:nowrap;font-family:"Montserrat",sans-serif;font-size:10px;font-weight:600;letter-spacing:.38em;text-transform:uppercase;color:rgba(232,189,134,.6);transition:opacity .5s;}
/* the card */
.vi-card{position:absolute;left:50%;top:50%;z-index:6;width:min(640px,94%);padding:clamp(48px,6vw,68px) clamp(24px,5vw,64px) clamp(46px,6vw,60px);background:linear-gradient(180deg,#f8f4ec 0%,#f2ece1 100%);color:#0a0a0a;
  box-shadow:0 60px 120px rgba(0,0,0,.75),0 0 0 1px rgba(201,138,78,.5);
  opacity:0;visibility:hidden;transform:translate(-50%,-30%) scale(.78);transition:transform 1.4s cubic-bezier(.2,.7,.1,1) 1.25s,opacity .8s ease 1.25s,visibility 0s linear 1.25s;}
.vi-card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(153,102,50,.28);pointer-events:none;}
.vi-card .vx-thanks{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif !important;font-style:italic;font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.3;color:#6a635b;}
.vi-card .vx-now{margin:20px 0 0;padding-top:20px;border-top:1px solid rgba(153,102,50,.4);display:inline-block;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif !important;font-weight:400;font-size:clamp(36px,4.1vw,62px);line-height:1;letter-spacing:-.015em;color:#0a0a0a;}
.vi-card .vx-now em{font-style:italic;color:var(--copper);}
.vi-card .vx-sub{margin:22px auto 0;max-width:470px;font-size:clamp(14px,1vw,15.5px);line-height:1.8;color:#555;}
/* CEO sign-off */
.vi-sign{margin:30px auto 0;display:flex;flex-direction:column;align-items:center;}
.vi-sign-img{display:block;width:clamp(220px,24vw,280px);height:auto;margin:0 0 8px;}
.vi-sign-name{margin:0;padding-top:12px;border-top:1px solid rgba(153,102,50,.35);font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-size:21px;line-height:1.2;color:#0a0a0a;}
.vi-sign-role{margin:6px 0 0;font-family:"Montserrat",sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--copper);}
.vi-card .vx-cta{margin-top:32px;display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap;}
.vx-btn{position:relative;background:#0a0a0a;border:1px solid rgba(201,138,78,.55);color:#fff !important;padding:18px 34px;transition:background .35s,border-color .35s;}
.vx-btn:hover{background:var(--copper);border-color:var(--copper);}
.vx-btn span{position:relative;}
/* gold light trace — a small bright point with a fading tail, travelling the
   gilded edge of the envelope, then of the opened card. Geometry/animation in vision.js. */
.vi-trace{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;z-index:4;
  filter:drop-shadow(0 0 2px rgba(255,240,210,1)) drop-shadow(0 0 6px rgba(245,200,130,.9)) drop-shadow(0 0 16px rgba(225,165,90,.6)) drop-shadow(0 0 34px rgba(217,160,90,.35));transition:opacity .6s ease;}
.vi-trace path{fill:none;stroke-linecap:round;}
.vi-trace-card{z-index:2;}
/* open */
.vx-inv.is-open .vi-seal{transform:translateY(-30px) scale(.4) rotate(-20deg);opacity:0;pointer-events:none;animation:none;}
.vx-inv.is-open .vi-hint,.vx-inv.is-open .vi-env .vi-trace,.vx-inv.is-open .vi-corner{opacity:0;}
.vx-inv.is-open .vi-floor{opacity:0;}
.vx-inv.is-open .vi-flap{transform:rotateX(178deg);z-index:0;}
.vx-inv.is-open .vi-peek{transform:translateY(-34%);}
.vx-inv.is-open .vi-env{transform:translate(-50%,-14%) scale(.9);opacity:0;}
.vx-inv.is-open .vi-card{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);transition-delay:1.25s,1.25s,0s;}
/* reduced-motion fallback that hid the envelope removed 2026-10-07 — opening is visitor-triggered; only the idle seal pulse stays off */
@media (prefers-reduced-motion:reduce){.vi-seal{animation:none;}}
@media (max-width:700px){.vi-stage{margin-top:22px;}.vx-inv.is-open .vi-stage{height:760px;}.vi-seal{width:84px;height:84px;margin:-44px 0 0 -42px;}.vi-card .vx-cta{gap:22px;}}

/* 02 · emphasised words in the readout */
.vf-desc em{font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-size:1.22em;color:#0a0a0a;}
/* the brand wordmark set inline in the readout, sized to the text's cap height */
.vf-logo{display:inline-block;height:.74em;width:auto;margin:0 .06em;vertical-align:-.02em;filter:brightness(0);}
/* 04 · "in Eger." and chapter I's second line in gold */
.vm-title em{color:#e8bd86 !important;}
.vm-card[data-k="0"] .vm-txt h3 em{color:#e8bd86;opacity:.9;}

/* 2026-10-06 — all italic accents in the manufactory + listening sections use
   the brand copper (#996632), matching "experience it." and card IV, instead
   of the lighter gold (#e8bd86) or a faded version of it. */
.vm-title em,
.vm-card .vm-txt h3 em,
.vm-pcb .vm-txt h3 em,
.vl-big em{color:var(--copper) !important;opacity:1 !important;}