/* 01. TOKENS & VARIABLES */
/* ========================================================================== */
:root{
  
--bg:#000000;
  
--color-highlight:#F6F6F6;
  
  
--color-dark:#242424;
--color-medium:#848484;
--color-light:#EDEDED;
  
  
--color-accent-dark:#111111;
--color-accent-light:#999999;

--plate-color:#242424;
--plate-thickness:4px;
--plate-length:12px;

--border-raw:2px dotted #242424;
--radius:2px;
  
--max:1280px;
  
--gutter:clamp(16px,2.2vw,24px);
--section-pad-y:clamp(34.263px,4.13343vw,56.133px);
--section-pad-x:clamp(34.263px,4.13343vw,56.133px);  

--section-pad-x-mini:clamp(23.984px,2.893vw,39.293px);
--section-pad-y-mini:clamp(23.984px,2.893vw,39.293px); 
  
--logo-max:720px;
--logo-offset:clamp(12px,2.4vw,28px);
--logo-safe-space:clamp(112px,14vw,180px);
  
--footer-safe-space:clamp(80px,10vw,120px);
--nav-edge-offset:calc(var(--gap-2) + 10px);
--main-pad-top:clamp(88px,10vw,132px);
  
--display-gap:clamp(1rem,5vw,4rem);
  
--gap-1:clamp(10px,1.4vw,16px);
--gap-2:clamp(14px,2vw,24px);
--gap-3:clamp(18px,2.6vw,32px);
  
--card-pad:clamp(12px,1.4vw,18px);
--btn-pad-y:clamp(10px,1.2vw,12px);
--btn-pad-x:clamp(14px,1.6vw,16px);
  
  
--font-typewriter:'courier-prime',"Courier New",Courier,monospace;
--font-stencil:'stencil',Georgia,Times,serif;  
  
--font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--font-mono:ui-monospace,SFMono-regular,Menlo,Monaco,Consolas,monospace;
  
--text-base:16px;
--text-line-height:1.55;
  
  --step--1: clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1rem, 0.98rem + 0.25vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.07rem + 0.45vw, 1.25rem);
  --step-2:  clamp(1.25rem, 1.15rem + 0.75vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.35rem + 1.05vw, 1.75rem);
  --step-4:  clamp(1.75rem, 1.55rem + 1.6vw, 2.25rem);
  --step-5:  clamp(2.5rem, 2.1rem + 3vw, 4.5rem);
  
--space-1:clamp(0.5rem,0.45rem + 0.25vw,0.75rem);
--space-2:clamp(0.75rem,0.7rem + 0.35vw,1rem);
--space-3:clamp(1rem,0.9rem + 0.6vw,1.5rem);
  
  
--stack-gap:var(--space-2);
--stack-gap-tight:var(--space-1);
--stack-gap-loose:var(--space-3);
}

/* Optical tuning */
@media (min-width: 768px){ :root{ --text-line-height: 1.50; } }
@media (min-width: 1024px){ :root{ --text-line-height: 1.48; } }

/* 02. FONT FACES */
/* ========================================================================== */
@font-face{
font-family:'stencil';
src:url('fonts/Brogte.woff2') format('woff2'),
url('fonts/Brogte.woff') format('woff');
font-weight:normal;
font-style:normal;
}

@font-face{
font-family:'fragment';
src: url('fonts/aifragment-webfont.woff2') format('woff2'),
url('fonts/aifragment-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'courier-prime';
src: url('fonts/courier-prime.regular-webfont.woff2') format('woff2'),
url('fonts/courier-prime.regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

/* 03. BASE & RESET */
/* ========================================================================== */
*{ box-sizing: border-box; }

html{
scroll-behavior:smooth;
scroll-padding-top:100px;
overflow-x:hidden;
}

body{
margin:0;
background:var(--bg);
color:var(--color-light);
padding-top:var(--logo-safe-space);
padding-bottom:var(--footer-safe-space);
font-family:var(--font-typewriter);
font-size:var(--text-base);
line-height:var(--text-line-height);
text-rendering:optimizeLegibility;
}

img,svg,video,canvas{ max-width:100%; height:auto; }

/* Global JS Cursor Override */
html,body,a,button,.link-style-btn,.copy-wrapper{
cursor:none !important;
}

ul {
list-style-type: square; 
padding-left: 1.5em;
margin-top: 0;
margin-bottom: 1rem;
}
li::marker {
color: var(--color-medium); 
}
li {
line-height: 1.6;
margin-bottom: 0.5rem;
color: var(--color-light); 
}
ul ul {
list-style-type: circle;
margin-top: 0.5rem;
margin-bottom: 0;
}

/* 04. STRUCTURAL LAYERS */
/* ========================================================================== */
/* Matrix Canvas sits behind everything, never blocks clicks */
#matrixCanvas{
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
}

/* Ensure site content is above the canvas */
.content{
position:relative;
z-index:1;
}

/* 05. TYPOGRAPHY ELEMENTS */
/* ========================================================================== */
h1{ font-size:var(--step-5); line-height:1.05; margin:0; }
h2{ font-size:var(--step-4); line-height:1.10; margin:0; letter-spacing:0.2em; }
h3{ font-size:var(--step-3); line-height:1.15; margin:0; }
h4{ font-size:var(--step-2); line-height:1.20; margin:0; letter-spacing:0.2em; }
h5{ font-size:var(--step-1); line-height:1.25; margin:0; }
h6{ font-size:var(--step-0); line-height:1.30; margin:0; letter-spacing:0.2em; }
p { font-size:var(--step-0); line-height:1.35; margin:0; letter-spacing:0.2em; }


h1, h2, h3, h4, h5, h6 {
font-family:var(--font-stencil)!important;
padding-bottom:0.4rem;
}

p {
font-family: var(--font-typewriter);
padding-bottom:0.2rem; 
}

.font-typewriter{ font-family: var(--font-typewriter)!important;}
.font-stencil{ font-family:var(--font-stencil)!important;}

.text-large{ font-size:var(--step-1); font-weight:400; }
.text-small{ font-size:var(--step--1); font-weight:200; }

.text-wide{ letter-spacing:0.25em; }
.text-tight {letter-spacing: -0.05em;}

.thin {font-weight:200;}


/* 06. UTILITIES */
/* ========================================================================== */

/* Text Modifiers */
.italic{ font-style:italic; }
.underline{ text-decoration:underline solid 2px; }
.strike{ text-decoration:line-through; }

/* Alignment & Formatting */
.text-center{ text-align:center !important; }
.text-left{ text-align:left !important; }
.text-right{ text-align:right !important; }
.text-justify{ text-align:justify !important; word-spacing:0.08em; }

.superscript {vertical-align: super;font-size: 1.0em;line-height: 0;}

/* Colors */
.light{ color:var(--color-light); }
.medium{ color:var(--color-medium); }
.dark{ color:var(--color-dark); }
.accent-1{ color:var(--color-accent-light); }
.accent-2{ color:var(--color-accent-dark); }


/* UL Styling */
.justified-list li{
text-align:justify;
hyphens:auto;
-webkit-hyphens:auto;
}
.justified-list li:not(:last-child){
margin-bottom:8px;
}

/* Visibility & State */
.opacity, .hover-opacity:hover{ opacity:0.25 !important; }

.hidden{ display:none !important; }

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

:focus-visible{
outline:2px solid currentColor;
outline-offset:3px;
}