/* VECTORHEART guide — site stylesheet */
:root{
  
  --vh-cobalt:    #2626E0;   
  --vh-cobalt-dk: #1E1ECC;   
  --vh-fog:       #E8ECEE;   
  --vh-grey:      #DCDDDF;   
  --vh-black:     #0A0A0C;   

  
  --vh-lime:      #C8F000;   
  --vh-magenta:   #FF0090;
  --vh-cyan:      #00E0FF;
  --vh-teal:      #00F0C8;

  
  --vh-green:     #34E06A;   
  --vh-peri:      #6E86F0;   

  
  --vh-red:       #FF2A2A;   

  
  --vh-white:     #F2F4F5;
  --vh-ink:       #0A0A0C;   

  
  --vh-c: #0033CC;           
  --vh-m: #EC008C;
  --vh-y: #C8F000;           
  --vh-k: #000000;
  --vh-orange: #FF4D00;      

  
  --vh-display: "Archivo Narrow","Saira Condensed",sans-serif; 
  --vh-grotesk: "Archivo","Space Grotesk",sans-serif;
  --vh-mono:    "Space Mono","JetBrains Mono",monospace;

  
  --vh-base: 8px;
  --vh-radius: 0;            
  --vh-rule: 1px solid;      
  --vh-rule-heavy: 2px solid;
  --vh-shell: 1180px;

  
  --ground:  var(--vh-cobalt);
  --on:      var(--vh-white);   
  --dim:     rgba(242,244,245,.62);
  --line:    rgba(242,244,245,.28);
  --lead:    var(--vh-lime);    
  --sig:     var(--vh-magenta); 
  --data:    var(--vh-red);     
}

*{margin:0;padding:0;box-sizing:border-box;border-radius:var(--vh-radius)!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--vh-grotesk);background:var(--vh-ink);color:var(--vh-white);
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}

[data-register="cobalt"]{
  --ground:var(--vh-cobalt); --on:var(--vh-white);
  --dim:rgba(242,244,245,.66); --line:rgba(242,244,245,.30);
  --lead:var(--vh-lime); --sig:var(--vh-magenta); --data:var(--vh-red);
}

[data-register="fog"]{
  --ground:var(--vh-fog); --on:var(--vh-ink);
  --dim:rgba(10,10,12,.55); --line:rgba(10,10,12,.22);
  --lead:var(--vh-teal); --sig:var(--vh-magenta); --data:var(--vh-red);
}

[data-register="cmyk"]{
  --ground:var(--vh-grey); --on:var(--vh-k);
  --dim:rgba(0,0,0,.55); --line:rgba(0,0,0,.22);
  --lead:var(--vh-c); --sig:var(--vh-m); --data:var(--vh-orange);
}

[data-register="tauceti"]{
  --ground:var(--vh-cobalt); --on:var(--vh-green);
  --dim:rgba(110,134,240,.85); --line:rgba(110,134,240,.45);
  --lead:var(--vh-green); --sig:var(--vh-peri); --data:var(--vh-red);
}

[data-register="black"]{
  --ground:var(--vh-black); --on:var(--vh-white);
  --dim:rgba(242,244,245,.60); --line:rgba(242,244,245,.24);
  --lead:var(--vh-lime); --sig:var(--vh-cyan); --data:var(--vh-red);
}

[data-register="white"]{
  --ground:#FFFFFF; --on:var(--vh-ink);
  --dim:rgba(10,10,12,.55); --line:rgba(10,10,12,.20);
  --lead:var(--vh-cyan); --sig:var(--vh-magenta); --data:var(--vh-red);
}

.vh-page{
  background:var(--ground);color:var(--on);position:relative;overflow:hidden;
  min-height:100vh;padding:clamp(28px,5vw,64px) 0;
}
.vh-shell{
  max-width:var(--vh-shell);margin:0 auto;
  padding:0 clamp(16px,4vw,48px);position:relative;z-index:3;
}

.vh-page::before,.vh-page::after{
  content:"";position:absolute;width:24px;height:24px;z-index:5;pointer-events:none;
}
.vh-page::before{top:20px;left:20px;border-left:var(--vh-rule-heavy) var(--lead);border-top:var(--vh-rule-heavy) var(--lead)}
.vh-page::after{bottom:20px;right:20px;border-right:var(--vh-rule-heavy) var(--lead);border-bottom:var(--vh-rule-heavy) var(--lead)}

.vh-strip{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--vh-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);border-bottom:var(--vh-rule) var(--line);padding-bottom:10px;margin-bottom:clamp(20px,4vw,40px);
}
.vh-strip b{color:var(--lead);font-weight:700}
.vh-strip .r{color:var(--sig)}

.vh-pageno{font-family:var(--vh-mono);font-size:11px;letter-spacing:.16em}

.vh-eye{
  font-family:var(--vh-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--lead);display:flex;align-items:center;gap:11px;margin-bottom:14px;
}
.vh-eye::before{content:"";width:30px;height:2px;background:var(--lead)}

.vh-h1{
  font-family:var(--vh-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(48px,11vw,150px);line-height:.82;letter-spacing:-.01em;margin:0;
}
.vh-h2{
  font-family:var(--vh-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,6vw,72px);line-height:.9;letter-spacing:-.005em;margin:0 0 18px;
}
.vh-h3{
  font-family:var(--vh-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(18px,2.6vw,26px);letter-spacing:.02em;line-height:1.05;margin:0 0 8px;
}
.vh-lead-text{font-size:clamp(15px,2vw,20px);max-width:64ch;color:var(--on)}
.vh-body{font-size:15px;max-width:70ch;color:var(--on)}
.vh-dim{color:var(--dim)}
.vh-hot{color:var(--lead)}
.vh-sig{color:var(--sig)}
.vh-mono{font-family:var(--vh-mono)}
mark{background:var(--lead);color:var(--ground);padding:0 .25em}

.vh-cross{
  position:relative;width:22px;height:22px;display:inline-block;flex:none;
}
.vh-cross::before,.vh-cross::after{content:"";position:absolute;background:var(--lead)}
.vh-cross::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.vh-cross::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
.vh-cross.sig::before,.vh-cross.sig::after{background:var(--sig)}

.vh-crossfield{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5}
.vh-crossfield .vh-cross{position:absolute}

.vh-xbox{
  border:var(--vh-rule-heavy) var(--line);aspect-ratio:1/1;position:relative;
  background:
    linear-gradient(45deg,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)),
    linear-gradient(-45deg,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px));
}
.vh-xbox::after{
  content:attr(data-label);position:absolute;left:6px;bottom:5px;
  font-family:var(--vh-mono);font-size:9px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;
}

.vh-barcode{
  height:42px;width:100%;
  background:repeating-linear-gradient(90deg,
    var(--on) 0 2px, transparent 2px 4px,
    var(--on) 4px 5px, transparent 5px 9px,
    var(--on) 9px 12px, transparent 12px 13px,
    var(--on) 13px 14px, transparent 14px 18px);
}
.vh-barcode.lead{background:repeating-linear-gradient(90deg,
    var(--lead) 0 2px, transparent 2px 4px, var(--lead) 4px 5px, transparent 5px 9px,
    var(--lead) 9px 12px, transparent 12px 13px, var(--lead) 13px 14px, transparent 14px 18px)}

.vh-qr{
  width:84px;height:84px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);
  gap:2px;background:var(--line);padding:2px;
}
.vh-qr i{background:var(--ground)}
.vh-qr i.on{background:var(--on)}

.vh-data{
  font-family:var(--vh-mono);font-size:11px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;
}
.vh-data .red{color:var(--vh-red)}

.vh-bracket{position:relative;padding:clamp(16px,3vw,28px)}
.vh-bracket::before,.vh-bracket::after{content:"";position:absolute;width:18px;height:18px}
.vh-bracket::before{top:0;left:0;border-left:var(--vh-rule-heavy) var(--lead);border-top:var(--vh-rule-heavy) var(--lead)}
.vh-bracket::after{bottom:0;right:0;border-right:var(--vh-rule-heavy) var(--lead);border-bottom:var(--vh-rule-heavy) var(--lead)}

.vh-halftone{
  background-color:var(--ground);
  background-image:radial-gradient(var(--lead) 28%,transparent 30%);
  background-size:9px 9px;
}

.vh-haz{height:16px;width:100%;
  background:repeating-linear-gradient(45deg,var(--lead) 0 14px,var(--ground) 14px 28px)}

.vh-corp{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--vh-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;border:var(--vh-rule) var(--line);
  padding:7px 11px;color:var(--on);
}
.vh-corp .dot{width:12px;height:12px;border:2px solid var(--lead);position:relative}
.vh-corp .dot::after{content:"";position:absolute;left:-4px;top:5px;width:20px;height:2px;background:var(--lead)}

.vh-pantone{
  display:inline-flex;flex-direction:column;border:var(--vh-rule) var(--line);min-width:120px;
  font-family:var(--vh-mono);text-transform:uppercase;
}
.vh-pantone .chip{height:54px}
.vh-pantone .lab{font-size:10px;letter-spacing:.08em;padding:6px 8px;color:var(--on)}

.vh-chips{display:flex;gap:8px;flex-wrap:wrap}
.vh-chip{
  font-family:var(--vh-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--on);border:var(--vh-rule-heavy) var(--line);
  padding:7px 13px;background:transparent;
  clip-path:polygon(0 0,100% 0,100% 100%,9px 100%);transition:.12s;
}
.vh-chip:hover,.vh-chip.lead{background:var(--lead);color:var(--ground);border-color:var(--lead)}

.vh-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--line);border:var(--vh-rule) var(--line)}
.vh-sw{background:var(--ground);padding:0}
.vh-sw .fill{height:84px;border-bottom:var(--vh-rule) var(--line)}
.vh-sw .meta{padding:9px 11px;font-family:var(--vh-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.vh-sw .meta b{display:block;color:var(--on);letter-spacing:.06em}
.vh-sw .meta span{color:var(--dim);font-size:10px}

.vh-grid{display:grid;gap:1px;background:var(--line);border:var(--vh-rule) var(--line)}
.vh-grid.c2{grid-template-columns:1fr}
@media(min-width:760px){.vh-grid.c2{grid-template-columns:1fr 1fr}.vh-grid.c3{grid-template-columns:repeat(3,1fr)}.vh-grid.c4{grid-template-columns:repeat(4,1fr)}}
.vh-grid.c3,.vh-grid.c4{grid-template-columns:1fr}
.vh-card{background:var(--ground);padding:clamp(16px,2.5vw,24px);display:flex;flex-direction:column;gap:10px;border-top:var(--vh-rule-heavy) var(--lead)}
.vh-card .ix{font-family:var(--vh-mono);font-size:12px;letter-spacing:.12em;color:var(--lead)}
.vh-card p{font-size:14px;color:var(--on)}

.vh-table{width:100%;border-collapse:collapse;font-size:14px}
.vh-table th,.vh-table td{text-align:left;padding:11px 12px;border-bottom:var(--vh-rule) var(--line);vertical-align:top}
.vh-table th{font-family:var(--vh-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lead)}
.vh-table td .vh-mono{font-size:13px}
.vh-table tr:hover td{background:rgba(127,127,127,.06)}

.vh-code{
  font-family:var(--vh-mono);font-size:12.5px;line-height:1.7;white-space:pre-wrap;
  border:var(--vh-rule) var(--line);padding:clamp(14px,2.5vw,22px);color:var(--on);
  background:rgba(127,127,127,.06);overflow-x:auto;
}
.vh-code .k{color:var(--lead)}
.vh-code .v{color:var(--sig)}

.vh-note{border-left:var(--vh-rule-heavy) var(--sig);padding:12px 16px;background:rgba(127,127,127,.06);font-size:14px}
.vh-note b{color:var(--sig)}
.vh-do{border-left-color:var(--lead)}
.vh-do b{color:var(--lead)}

.vh-ghost{
  position:absolute;right:-2%;bottom:-18%;z-index:0;pointer-events:none;
  font-family:var(--vh-display);font-weight:700;font-size:clamp(150px,30vw,420px);
  line-height:.78;color:var(--lead);opacity:.10;text-transform:uppercase;
}

.vh-gridoverlay{
  position:relative;height:240px;border:var(--vh-rule) var(--line);
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:var(--vh-base) var(--vh-base);
}

.vh-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.vh-row.between{justify-content:space-between}
.vh-stack{display:flex;flex-direction:column;gap:16px}
.vh-mt{margin-top:clamp(20px,4vw,40px)}
.vh-mt-s{margin-top:16px}
.vh-sep{height:var(--vh-rule-heavy);background:var(--line);border:0;margin:clamp(20px,4vw,40px) 0}

.vh-knockout{
  display:inline-block;background:var(--lead);color:var(--ground);
  font-family:var(--vh-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,9vw,110px);line-height:.85;padding:0 .12em;letter-spacing:-.01em;
}
.vh-offset{position:relative;font-family:var(--vh-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,9vw,110px);line-height:.85;letter-spacing:-.01em;color:var(--on)}
.vh-offset::before{content:attr(data-text);position:absolute;left:6px;top:5px;color:var(--sig);opacity:.6;z-index:-1}

.vh-scan{position:relative}
.vh-scan::after{
  content:"";position:absolute;left:0;right:0;height:6px;top:42%;z-index:4;pointer-events:none;
  background:var(--lead);mix-blend-mode:screen;opacity:.55;
}

.vh-rgb{position:relative;text-shadow:-2px 0 0 var(--vh-cyan),2px 0 0 var(--vh-magenta)}

.vh-dither{
  background-image:
    linear-gradient(45deg,var(--on) 25%,transparent 25%,transparent 75%,var(--on) 75%),
    linear-gradient(45deg,var(--on) 25%,transparent 25%,transparent 75%,var(--on) 75%);
  background-size:6px 6px;background-position:0 0,3px 3px;opacity:.5;height:48px;
}

.vh-pixelsort{
  height:120px;
  background:repeating-linear-gradient(90deg,
    var(--lead) 0 3px,var(--sig) 3px 5px,var(--ground) 5px 11px,var(--on) 11px 12px,var(--ground) 12px 19px);
  filter:contrast(1.1);
}

.vh-datamosh{
  position:relative;min-height:200px;overflow:hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(0,0,0,.18) 7px 8px),
    repeating-linear-gradient(90deg, var(--lead) 0 4px, transparent 4px 22px),
    repeating-linear-gradient(90deg, var(--sig) 0 3px, transparent 3px 40px),
    var(--ground);
}
.vh-datamosh .shard{
  position:absolute;height:18px;background:var(--on);mix-blend-mode:difference;
}

@media (prefers-reduced-motion: no-preference){
  
  .rv{opacity:0;transform:translateY(12px);animation:vhrv .6s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes vhrv{to{opacity:1;transform:none}}
  
  .vh-scan.live::after{animation:vhscan 4.5s linear infinite}
  @keyframes vhscan{0%{top:8%}100%{top:92%}}
  
  .vh-rgb.live:hover{animation:vhrgb .25s steps(2) infinite}
  @keyframes vhrgb{0%{text-shadow:-2px 0 0 var(--vh-cyan),2px 0 0 var(--vh-magenta)}
    100%{text-shadow:-3px 0 0 var(--vh-cyan),3px 1px 0 var(--vh-magenta)}}
}

@media print{
  @page{margin:14mm}
  body{background:#fff}
  .vh-page{min-height:auto;break-after:page;page-break-after:always;padding:0 0 8mm}
  .vh-page:last-child{break-after:auto}
  .vh-page::before,.vh-page::after{position:absolute}
  .vh-ghost{opacity:.08}
  .vh-nav-fixed{display:none!important}
  a{text-decoration:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.vh-nav-fixed{
  position:fixed;top:0;left:0;right:0;z-index:50;background:var(--vh-ink);color:var(--vh-white);
  border-bottom:var(--vh-rule-heavy) var(--vh-lime);
  display:flex;gap:6px;align-items:center;padding:8px clamp(12px,3vw,24px);overflow-x:auto;
  font-family:var(--vh-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.vh-nav-fixed a{text-decoration:none;color:var(--vh-white);white-space:nowrap;padding:4px 8px;border:1px solid transparent}
.vh-nav-fixed a:hover{color:var(--vh-ink);background:var(--vh-lime)}
.vh-nav-fixed b{color:var(--vh-lime);margin-right:auto}
body{padding-top:42px}
@media print{body{padding-top:0}}