/* "&" in a plainer face (Sienna, 19 Oct): Archivo's ampersand reads as a letter. This face covers only U+0026. */
@font-face{font-family:"VLGE Amp";src:local("Helvetica Neue"),local("HelveticaNeue"),local("Arial"),local("Liberation Sans");unicode-range:U+0026}
/* ==========================================================================
   VLGE site · the deck's style, as a website
   Every token below is the AI deck's (ai-deck/src/deck.css), unchanged.
   Colour carries one meaning each, everywhere:
     lilac  = human
     orange = agent / robot / generated
     bone   = the world, exact state, the expert ceiling (and so: BUILD A WORLD)
   Directions (directions/<key>/layout.css) change layout and motion only.
   ========================================================================== */
:root,.tone-dark{
  --bg:#19161D; --bg-2:#201C25; --bg-3:#28232E; --bg-4:#302A37;
  --card:rgba(20,17,23,.72); --card-2:rgba(27,23,32,.78);
  --line:rgba(236,230,234,.10); --line-2:rgba(236,230,234,.18); --line-3:rgba(236,230,234,.30);
  --ink:#ECE6EA; --ink-2:#AEA6AD; --ink-3:#8A838B; --ink-4:#4A444C;
  --lilac:#D897C9; --lilac-hi:#F1C6E7; --lilac-lo:#BC6BAA; --lilac-deep:#3E2338; --blue:#6E95FF;
  --lilac-a06:rgba(216,151,201,.07); --lilac-a12:rgba(216,151,201,.13); --lilac-a20:rgba(216,151,201,.20); --lilac-a35:rgba(216,151,201,.35);
  --orange:#F07E3E; --orange-hi:#F7A675; --orange-a12:rgba(240,126,62,.13); --orange-a20:rgba(240,126,62,.20); --orange-a35:rgba(240,126,62,.35);
  --bone:#ECE6EA; --on-bone:#141015;
  --on-lilac:#1A1219; --on-orange:#1E0F07;
  --grain-blend:screen; --grain-op:.06;
  --scrim:rgba(25,22,29,.8);
  color:var(--ink);
  /* the live modules read these two; human = lilac */
  --accent:#D897C9; --accent-deep:#F1C6E7; --midnight:#ECE6EA; --haze:#19161D;
}
.tone-light{
  --bg:#F6F1F4; --bg-2:#FCFAFC; --bg-3:#EFE6EC; --bg-4:#E6DAE2;
  --card:rgba(255,255,255,.66); --card-2:rgba(255,255,255,.82);
  --line:rgba(40,22,36,.10); --line-2:rgba(40,22,36,.17); --line-3:rgba(40,22,36,.30);
  --ink:#1C141B; --ink-2:#5F5560; --ink-3:#7C727B; --ink-4:#BDB3BB;
  --lilac:#AA4593; --lilac-hi:#8C3176; --lilac-lo:#CC7AB9; --lilac-deep:#F1DCEB; --blue:#2F62E6;
  --lilac-a06:rgba(170,69,147,.06); --lilac-a12:rgba(170,69,147,.10); --lilac-a20:rgba(170,69,147,.17); --lilac-a35:rgba(170,69,147,.30);
  --orange:#DF6420; --orange-hi:#B94E12; --orange-a12:rgba(223,100,32,.10); --orange-a20:rgba(223,100,32,.17); --orange-a35:rgba(223,100,32,.30);
  --bone:#1C141B; --on-bone:#F6F1F4;
  --on-lilac:#FFFFFF; --on-orange:#FFFFFF;
  --grain-blend:multiply; --grain-op:.08;
  --scrim:rgba(246,241,244,.82);
  color:var(--ink);
  --accent:#AA4593; --accent-deep:#8C3176; --midnight:#1C141B; --haze:#F6F1F4;
}
:root{
  --f-sans:"VLGE Amp","Archivo",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --f-math:"STIX Two Text","Times New Roman",serif;
  /* backwards names the live modules and inline styles use */
  --display:var(--f-sans); --sans:var(--f-sans); --mono:var(--f-mono);
  --ease:cubic-bezier(.2,.7,.1,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --dk:.65;                                   /* every entrance delay is scaled by this, as in the deck */
  --glass:blur(18px) saturate(1.25);
  /* the deck's 120px margin on a 1920 stage = 6.25vw */
  --m:clamp(20px,6.25vw,120px);
  --maxw:1680px;
  --gap:clamp(16px,2vw,32px);
  --nav-h:72px;
  /* type: the deck's sizes at web scale */
  --t-display:clamp(38px,5vw,86px);
  --t-h1:clamp(32px,3.9vw,66px);
  --t-h2:clamp(24px,2.6vw,42px);
  --t-h3:clamp(19px,1.45vw,24px);
  --t-lede:clamp(18px,1.42vw,23px);
  /* the type levels (Sienna, 16 Oct): 1 the page's promise, 2 a section's title, 3 its subtitle;
     each step is clearly smaller than the one above (1440 wide: 76 / 43 / 20 px; phones: 33 / 24 / 17) */
  --type-1:clamp(34px,min(5.3vw,8.6vh),92px);
  --type-2:clamp(22px,2.5vw,40px);
  --type-3:clamp(17px,1.42vw,23px);
  --t-body:17px;
  --t-small:15px;
  --t-label:11.5px;
  --sec:clamp(60px,9vh,112px);                /* vertical rhythm between sections (A3: tighter) */
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:var(--t-body);line-height:1.6;
  font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,q{margin:0;padding:0}
ul,ol{list-style:none}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
b,strong{font-weight:600;color:var(--ink)}
em{font-style:normal;color:var(--ink)}
::selection{background:var(--lilac);color:var(--on-lilac)}
:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:4px}

/* ---------- the field and the grain ---------- */
#field{position:fixed;inset:0;width:100vw;height:100lvh;z-index:0;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
:where(body>*:not(#field)){position:relative;z-index:1}

/* ---------- type primitives ---------- */
h1{font-size:var(--t-h1);line-height:1.02;font-weight:500;font-variation-settings:"wdth" 108;letter-spacing:-.024em;color:var(--ink);text-wrap:balance}
h2{font-size:var(--t-h2);line-height:1.05;font-weight:500;font-variation-settings:"wdth" 108;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
h3,h4{font-size:var(--t-h3);line-height:1.2;font-weight:500;font-variation-settings:"wdth" 104;letter-spacing:-.008em;color:var(--ink)}
p{color:var(--ink-2);text-wrap:pretty}
.lede{font-size:var(--t-lede);line-height:1.45;color:var(--ink-2);max-width:40em}
.accent,.hl,.human{color:var(--lilac)}
.human{font-family:inherit;font-style:normal}
/* the deck's eyebrow: mono, tracked, lilac. No mark in front: the AI deck's four-square glyph
   was not approved (Sienna, 2026-10-15), here or in the deck */
.u-kicker,.u-mono{font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--lilac)}
.u-kicker{display:flex;align-items:center;gap:12px}
.u-display{font-size:var(--t-h1);line-height:1.02;font-weight:500;font-variation-settings:"wdth" 110;letter-spacing:-.026em;color:var(--ink)}
.mono{font-family:var(--f-mono)}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--m));margin-inline:auto;padding-inline:var(--m)}
section{position:relative}
main{display:block}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);display:flex;align-items:center;gap:clamp(16px,3vw,48px);
  padding:0 var(--m);transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);border-bottom:1px solid transparent}
.nav.solid{background:var(--scrim);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);border-bottom-color:var(--line)}
.nav>a:first-child{flex:none;display:block}
.nav>a:first-child img{height:19px;width:auto}
.nav{color:var(--ink)}
.tone-dark .nav>a:first-child img,.nav.tone-dark>a:first-child img{filter:invert(1) brightness(1.6)}
.nav.tone-light>a:first-child img{filter:none}
.nav__links{display:flex;gap:clamp(14px,2.2vw,34px);margin-inline:auto}
.nav__links a{font-size:14.5px;letter-spacing:.005em;color:var(--ink-2);padding:6px 0;position:relative;transition:color .2s}
.nav__links a:hover,.nav__links a.on{color:var(--ink)}
.nav__links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--lilac);border-radius:2px}
.nav__cta{flex:none;font-family:var(--f-mono);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--bone);color:var(--on-bone);padding:11px 18px 10px;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nav__cta:hover{transform:translateY(-1px);box-shadow:0 8px 28px -10px var(--lilac-a35)}
.nav__toggle{display:none}
.nav__panel{display:none}

/* ---------- buttons and links ---------- */
.cta,.ghost,.domains a,.item__cta,.see{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--bone);color:var(--on-bone);padding:15px 24px 14px;border-radius:999px;font-weight:600;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px -14px var(--lilac-a35)}
.ghost,.see,.item__cta{display:inline-flex;align-items:center;gap:8px;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line-3);transition:border-color .25s,color .25s}
.ghost:hover,.see:hover,.item__cta:hover{border-color:var(--lilac);color:var(--lilac-hi)}
.tone-light .ghost:hover,.tone-light .see:hover,.tone-light .item__cta:hover{color:var(--lilac)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}

/* ---------- cards: the deck's card ---------- */
.card-like{background:var(--card);border:1px solid var(--line);border-radius:14px}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li,.chips span{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 11px 5px;line-height:1.3}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,var(--bg) 40%)}
.sf__wrap{max-width:calc(var(--maxw) + 2*var(--m));margin:0 auto;padding:clamp(56px,9vh,96px) var(--m) clamp(28px,5vh,48px);display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,4vw,64px)}
.sf__tag{font-size:clamp(28px,3vw,46px);line-height:1.04;font-weight:500;font-variation-settings:"wdth" 110;letter-spacing:-.02em;color:var(--ink)}
.sf__mail{display:inline-block;margin-top:22px;font-family:var(--f-mono);font-size:13px;color:var(--lilac);border-bottom:1px solid var(--lilac-a35);padding-bottom:3px}
.sf__social{display:flex;gap:20px;margin-top:18px}
.sf__social a,.sf__col a{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);transition:color .2s}
.sf__social a:hover,.sf__col a:hover{color:var(--ink)}
.sf__col{display:flex;flex-direction:column;gap:12px}
.sf__h{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.sf__bar{max-width:calc(var(--maxw) + 2*var(--m));margin:0 auto;padding:18px var(--m) 28px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}

/* ---------- reveal grammar (the deck's, driven by scroll) ----------
   site.js marks entering elements .is-in; --d is the per-element delay, scaled by --dk.
   Nothing here hides text for longer than ~.4 s, and nothing animates per letter. */
.js [data-rv]{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease) calc(var(--d,0s)*var(--dk)),transform .7s var(--ease) calc(var(--d,0s)*var(--dk))}
.js [data-rv="f"]{transform:none}
.js [data-rv="x"]{opacity:1;transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease-io) calc(var(--d,0s)*var(--dk))}
.js [data-rv="w"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-io) calc(var(--d,0s)*var(--dk))}
.js [data-rv].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
/* titles rise line by line inside a mask */
.vl-ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.vl-ln>span{display:inline-block;will-change:transform}
.js .vl-ln>span{transform:translateY(106%);transition:transform 1s var(--ease) calc(var(--d,0s)*var(--dk))}
.js .is-in .vl-ln>span,.js .vl-ln.is-in>span{transform:none}

/* instruments sit on light "evidence" panels, as the deck's evidence chapter does */
.evidence{background:var(--bg);color:var(--ink)}

/* ---------- reduced motion: final state, no travel ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-rv],.js .vl-ln>span{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
  html{scroll-behavior:auto}
}

/* ---------- phones ---------- */
@media (max-width:860px){
  :root{--nav-h:62px;--t-body:16.5px}
  .nav__links{display:none}
  .nav__cta{margin-left:auto;padding:9px 13px 8px;font-size:10.5px}
  .nav__toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 9px;margin-right:-9px}
  .nav__toggle span{display:block;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
  .nav-open .nav__toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-open .nav__toggle span:nth-child(2){opacity:0}
  .nav-open .nav__toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav__panel{display:flex;flex-direction:column;position:fixed;inset:0;z-index:79;background:var(--scrim);-webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);
    padding:calc(var(--nav-h) + 24px) var(--m) 32px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
  .nav-open .nav__panel{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
  .nav__panel a{font-size:30px;line-height:1.1;font-weight:500;font-variation-settings:"wdth" 108;letter-spacing:-.015em;color:var(--ink-2);padding:12px 0;border-bottom:1px solid var(--line)}
  .nav__panel a.on{color:var(--lilac)}
  .sf__wrap{grid-template-columns:1fr 1fr}
  .sf__brand{grid-column:1/-1}
}