/* ============================================================
   AES LACRIMA — editorial / diagnostic aesthetic
   type: Archivo Black (display) · Space Grotesk (body) · JetBrains Mono (data)
   palette: ink black, bone, one signal-orange accent, one acid-lime accent
   no glassmorphism, no gradient text, no rounded neon, no emoji decoration
   ============================================================ */

:root{
    --ink:      #0c0b0a;
    --ink-2:    #14110f;
    --ink-3:    #1d1916;
    --bone:     #f2ece2;
    --bone-dim: #b8b0a3;
    --bone-mute:#7d756a;
    --rule:     #2a241f;
    --rule-2:   #3a322b;

    --orange:   #ff5b1f;   /* primary signal */
    --orange-d: #c9460f;
    --lime:     #c8ff3a;   /* secondary signal */
    --rust:     #8a3a1c;

    --f-display:'Archivo Black', 'Arial Black', sans-serif;
    --f-body:   'Space Grotesk', system-ui, sans-serif;
    --f-mono:   'JetBrains Mono', 'Courier New', monospace;

    --max: 1280px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
    background:var(--ink);
    color:var(--bone);
    font-family:var(--f-body);
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    /* faint film grain via layered gradients — subtle, not "AI noise" */
    background-image:
        radial-gradient(circle at 15% 8%, rgba(255,91,31,.05), transparent 38%),
        radial-gradient(circle at 88% 92%, rgba(200,255,58,.035), transparent 40%);
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
code{
    font-family:var(--f-mono); font-size:.85em;
    color:var(--lime); background:rgba(200,255,58,.08);
    padding:1px 5px;
}
strong{ color:var(--bone); font-weight:700; }
em{ font-style:italic; color:var(--bone-dim); }

/* ---------- STATUS BAR ---------- */
.statusbar{
    position:sticky; top:0; z-index:60;
    display:flex; align-items:stretch;
    background:var(--ink-2);
    border-bottom:1px solid var(--rule);
    font-family:var(--f-mono); font-size:11px;
    letter-spacing:.04em;
    padding:0 clamp(12px,3vw,32px);
    height:30px;
}
.statusbar-cell{ display:flex; align-items:center; gap:8px; padding:0 16px 0 0; margin-right:16px; border-right:1px solid var(--rule); }
.statusbar-cell:last-child{ border-right:0; padding-right:0; }
.sb-goto{ background:none; border:none; cursor:pointer; font:inherit; color:inherit; padding:0; }
.sb-goto:hover .sb-v{ color:var(--orange); }
.sb-clock{ margin-left:auto; }
.sb-k{ color:var(--bone-mute); }
.sb-v{ color:var(--bone-dim); }
.sb-v.ok{ color:var(--lime); }
.sb-v.warn{ color:var(--orange); }

/* sound chip — starts the cyberpunk electro loop */
.snd-chip{
    background:transparent; cursor:pointer; border:0; border-right:0;
    font:inherit; padding:0 0 0 16px !important; margin:0;
    color:var(--bone-dim); transition:color .15s, background .15s;
}
.snd-chip:hover{ color:var(--bone); background:var(--ink-3); }
.snd-chip.is-on #sndState{ color:var(--orange); }
.snd-chip.is-on .snd-bars{ opacity:1; }
.snd-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; opacity:.3; transition:opacity .2s; }
.snd-bars i{
    width:2px; background:var(--orange); height:30%;
    animation:sndbar .8s ease-in-out infinite;
}
.snd-bars i:nth-child(2){ animation-delay:.15s; }
.snd-bars i:nth-child(3){ animation-delay:.3s; }
.snd-bars i:nth-child(4){ animation-delay:.45s; }
@keyframes sndbar{ 0%,100%{ height:20%; } 50%{ height:100%; } }

/* ---------- NAV ---------- */
.nav{
    position:sticky; top:30px; z-index:55;
    display:flex; align-items:center; gap:24px;
    padding:14px clamp(16px,3vw,32px);
    background:rgba(12,11,10,.88);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--rule);
}
.mark{
    font-family:var(--f-display); font-size:20px; letter-spacing:-.01em;
    display:flex; align-items:center; gap:1px; color:var(--bone);
    line-height:1;
}
.mark-a{
    display:inline-grid; place-items:center; width:26px; height:26px;
    background:var(--orange); color:var(--ink); margin-right:5px;
    font-size:16px;
}
.mark-es{ color:var(--bone); }
.mark-lac{
    margin-left:10px; padding-left:10px; border-left:1px solid var(--rule-2);
    font-family:var(--f-mono); font-size:12px; font-weight:500;
    letter-spacing:.18em; color:var(--bone-dim);
}
.nav-rail{ display:flex; gap:20px; margin-left:28px; }
.nav-rail a{
    font-family:var(--f-mono); font-size:13px; color:var(--bone-dim);
    letter-spacing:.02em; transition:color .15s; position:relative;
}
.nav-rail a:hover{ color:var(--orange); }
.nav-rail a::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
    background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .2s;
}
.nav-rail a:hover::after{ transform:scaleX(1); }
.nav-gh{
    margin-left:auto; display:inline-flex; align-items:center; gap:8px;
    font-family:var(--f-mono); font-size:12px; letter-spacing:.08em;
    color:var(--bone); border:1px solid var(--rule-2); padding:8px 14px;
    transition:all .15s;
}
.nav-gh:hover{ border-color:var(--orange); color:var(--orange); }
.nav-gh svg{ transition:fill .15s; }

main{ }

/* ---------- BUTTONS ---------- */
.btn-solid,.btn-line{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--f-mono); font-size:13px; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase;
    padding:13px 22px; cursor:pointer; border:none;
    transition:all .18s ease;
}
.btn-solid{
    background:var(--orange); color:var(--ink); font-weight:700;
    box-shadow:4px 4px 0 var(--ink-3);
}
.btn-solid:hover{ background:var(--lime); box-shadow:6px 6px 0 var(--ink-3); transform:translate(-2px,-2px); }
.btn-solid .arr{ transition:transform .18s; }
.btn-solid:hover .arr{ transform:translateX(4px); }
.btn-line{
    background:transparent; color:var(--bone-dim);
    border:1px solid var(--rule-2);
}
.btn-line:hover{ color:var(--orange); border-color:var(--orange); }

/* ---------- SECTIONS ---------- */
.sect{ max-width:var(--max); margin:0 auto; padding:clamp(64px,9vw,120px) clamp(16px,3vw,32px); }
.sect--alt{ background:var(--ink-2); max-width:none; padding-left:clamp(16px,3vw,32px); padding-right:clamp(16px,3vw,32px); }
.sect--alt > *{ max-width:var(--max); margin-left:auto; margin-right:auto; }
.sect--feature{
    background:var(--ink-2); max-width:none;
    display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
    padding:0;
}
.sect-head{ margin-bottom:48px; max-width:760px; }
.sect-no{
    display:inline-block; font-family:var(--f-mono); font-size:12px;
    color:var(--orange); letter-spacing:.15em; margin-bottom:14px;
    border-top:1px solid var(--orange); padding-top:8px;
}
.sect-title{
    font-family:var(--f-display); font-weight:900;
    font-size:clamp(30px,4.6vw,52px); line-height:1.02;
    letter-spacing:-.02em; color:var(--bone); margin-bottom:14px;
}
.sect-sub{ color:var(--bone-dim); font-size:17px; max-width:620px; }
.sect-note{ color:var(--bone-mute); font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; margin-top:8px; max-width:620px; }

/* ---------- HERO ---------- */
.hero{ max-width:var(--max); margin:0 auto; padding:clamp(40px,7vw,80px) clamp(16px,3vw,32px) 0; }
.hero-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }

.kicker{ display:flex; align-items:center; gap:12px; margin-bottom:28px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--bone-mute); }
.kicker-num{ color:var(--orange); }
.kicker-line{ flex:1; height:1px; background:var(--rule-2); max-width:60px; }

.display{
    font-family:var(--f-display); font-weight:900;
    font-size:clamp(32px,5.6vw,72px); line-height:.9;
    letter-spacing:-.035em; margin-bottom:30px; color:var(--bone);
}
.d-row{ display:block; }
.d-out{ color:transparent; -webkit-text-stroke:1.5px var(--bone-dim); }
.d-indent{ padding-left:.5em; }
.d-accent{ color:var(--orange); }

.lede{ font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--bone-dim); max-width:520px; margin-bottom:32px; }
.lede strong{ color:var(--bone); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-right{ display:flex; flex-direction:column; gap:20px; }
.hero-shot{ border:1px solid var(--rule); background:var(--ink-2); position:relative; }
.shot-tag{
    position:absolute; top:0; left:0; z-index:2;
    background:var(--orange); color:var(--ink);
    font-family:var(--f-mono); font-size:10px; font-weight:700;
    letter-spacing:.1em; padding:5px 10px;
}
.hero-shot img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:contrast(1.05) saturate(.95); }
.hero-shot figcaption{
    font-family:var(--f-mono); font-size:11px; color:var(--bone-mute);
    padding:8px 12px; border-top:1px solid var(--rule);
}
.spec{
    border:1px solid var(--rule); background:var(--ink-2);
    display:grid; grid-template-columns:1fr; font-family:var(--f-mono); font-size:13px;
}
.spec div{ display:flex; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--rule); }
.spec div:last-child{ border-bottom:0; }
.spec dt{ color:var(--bone-mute); letter-spacing:.06em; }
.spec dd{ color:var(--bone); }
.spec .muted{ color:var(--bone-mute); font-style:italic; }

/* fragment shader band — circular animation showing shader support */
.frag-band{
    margin-top:clamp(50px,7vw,80px);
    border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:clamp(28px,4vw,48px) clamp(16px,3vw,32px);
    background:var(--ink-2);
    position:relative; overflow:hidden;
}
.frag-side{ display:flex; flex-direction:column; gap:4px; }
.frag-side--r{ align-items:flex-end; text-align:right; }
.frag-k{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--orange); }
.frag-v{ font-family:var(--f-display); font-size:clamp(14px,1.6vw,20px); color:var(--bone); letter-spacing:-.01em; }
.frag-stage{
    width:clamp(180px,20vw,240px); height:clamp(180px,20vw,240px);
    position:relative; display:grid; place-items:center;
}
/* the glow orb — smooth orange/lime plasma, like a fragment shader */
.frag-orb{
    width:100%; height:100%; border-radius:50%;
    background:
        radial-gradient(circle at 35% 30%, var(--lime), transparent 50%),
        radial-gradient(circle at 70% 70%, var(--orange), transparent 55%),
        radial-gradient(circle at 50% 50%, #b54210, transparent 70%);
    filter:blur(2px);
    animation:orbpulse 4s ease-in-out infinite;
    box-shadow:
        0 0 80px rgba(255,91,31,.30),
        0 0 120px rgba(200,255,58,.12);
}
@keyframes orbpulse{
    0%,100%{ transform:scale(1) rotate(0deg);   filter:blur(2px) hue-rotate(0deg); }
    50%    { transform:scale(1.08) rotate(180deg); filter:blur(4px) hue-rotate(60deg); }
}

/* ---------- GLITCH (hero title hover) ---------- */
[data-glitch]{ position:relative; }
[data-glitch]::before,
[data-glitch]::after{
    content:attr(data-glitch); position:absolute; top:0; left:0;
    width:100%; height:100%; pointer-events:none; opacity:0;
    /* display clone matches the parent text styling */
    color:var(--bone);
}
[data-glitch]:hover::before{
    opacity:.85; color:var(--orange);
    text-shadow:2px 0 var(--orange);
    clip-path:inset(0 0 62% 0);
    animation:glitcha .35s steps(2) infinite;
}
[data-glitch]:hover::after{
    opacity:.85; color:var(--lime);
    text-shadow:-2px 0 var(--lime);
    clip-path:inset(58% 0 0 0);
    animation:glitchb .35s steps(2) infinite;
}
.d-out[data-glitch]::before,
.d-out[data-glitch]::after{ -webkit-text-stroke:1.5px var(--bone-dim); }
.d-out[data-glitch]:hover::before{ -webkit-text-stroke:1.5px var(--orange); }
.d-out[data-glitch]:hover::after{ -webkit-text-stroke:1.5px var(--lime); }
@keyframes glitcha{ 0%{transform:translate(0)} 50%{transform:translate(-3px,1px)} 100%{transform:translate(2px,-1px)} }
@keyframes glitchb{ 0%{transform:translate(0)} 50%{transform:translate(3px,-1px)} 100%{transform:translate(-2px,1px)} }

/* ---------- DOWNLOAD ---------- */
.channel-switch{ display:flex; gap:0; margin-bottom:32px; border:1px solid var(--rule); width:fit-content; }
.ch-switch{
    background:transparent; border:0; border-right:1px solid var(--rule);
    color:var(--bone-mute); font-family:var(--f-mono); font-size:13px;
    letter-spacing:.08em; padding:13px 22px; cursor:pointer;
    display:inline-flex; align-items:center; gap:10px; transition:all .15s;
}
.ch-switch:last-child{ border-right:0; }
.ch-switch:hover{ color:var(--bone); }
.ch-switch.is-active{ background:var(--ink-3); color:var(--bone); }
.ch-switch .ch-dot{ width:8px; height:8px; background:var(--lime); display:inline-block; }
.ch-switch .ch-dot--warn{ background:var(--orange); }
.ch-ver{ color:var(--orange); font-weight:700; }

.dl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dl-loading{ grid-column:1/-1; font-family:var(--f-mono); color:var(--bone-mute); padding:40px; text-align:center; border:1px dashed var(--rule-2); }
.dots{ animation:dots 1.4s steps(4) infinite; overflow:hidden; display:inline-block; vertical-align:bottom; width:1.5em; text-align:left; }
@keyframes dots{ 0%{content:""} 100%{} }

.dl-card{
    border:1px solid var(--rule); background:var(--ink-2);
    display:flex; flex-direction:column; transition:border-color .18s, background .18s, transform .18s;
    position:relative; overflow:hidden;
}
.dl-card:hover{ border-color:var(--orange); transform:translateY(-3px); }
.dl-card-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--rule);
}
.dl-card-platform{ font-family:var(--f-display); font-size:20px; letter-spacing:-.01em; color:var(--bone); }
.dl-card-arch{ font-family:var(--f-mono); font-size:11px; color:var(--bone-mute); letter-spacing:.06em; }
.dl-variants{ display:flex; flex-direction:column; }
.dl-var{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 18px; border-bottom:1px solid var(--rule);
    font-family:var(--f-mono); font-size:13px; color:var(--bone);
    transition:background .15s; cursor:pointer;
}
.dl-var:last-child{ border-bottom:0; }
.dl-var:hover{ background:var(--ink-3); color:var(--orange); }
.dl-var-label{ display:flex; align-items:center; gap:8px; }
.dl-var-tag{
    font-size:9px; letter-spacing:.08em; padding:2px 6px;
    border:1px solid var(--rule-2); color:var(--bone-mute);
}
.dl-var-tag.aot{ color:var(--lime); border-color:rgba(200,255,58,.3); }
.dl-var-size{ color:var(--bone-mute); font-size:11px; }
.dl-var-dl{ color:var(--orange); font-size:14px; }

.dl-card--empty{
    border:1px dashed var(--rule-2); background:transparent;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:30px 18px; gap:8px;
}
.dl-card--empty .dl-e-icon{ font-family:var(--f-display); font-size:22px; color:var(--bone-mute); }
.dl-card--empty .dl-e-txt{ font-family:var(--f-mono); font-size:12px; color:var(--bone-mute); letter-spacing:.04em; }

.dl-foot{ margin-top:28px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.link-out{ font-family:var(--f-mono); font-size:13px; color:var(--orange); border-bottom:1px solid var(--orange); padding-bottom:2px; transition:color .15s; }
.link-out:hover{ color:var(--lime); border-color:var(--lime); }
.dl-note{ font-family:var(--f-mono); font-size:12px; color:var(--bone-mute); max-width:480px; }
/* ---------- COMPATIBILITY GRID ---------- */
.compat-label{
    display:block; margin-top:20px; margin-bottom:10px;
    font-family:var(--f-mono); font-size:11px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--bone-mute);
}
.compat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.compat-card{
    border:1px solid var(--rule-2); background:var(--ink-2);
    padding:18px 20px;
}
.compat-head{
    display:block; font-family:var(--f-mono); font-size:12px; font-weight:700;
    letter-spacing:.12em; color:var(--orange); margin-bottom:12px;
}
.compat-list{ list-style:none; margin:0; padding:0; }
.compat-list li{
    font-family:var(--f-mono); font-size:12px; color:var(--bone-dim);
    padding:5px 0; border-bottom:1px solid var(--rule);
}
.compat-list li:last-child{ border-bottom:0; }
.compat-arch{ color:var(--bone-mute); float:right; }

/* ---------- SHOWCASE WALL ---------- */
.wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; grid-auto-rows:200px; }
.frame{
    position:relative; overflow:hidden; border:1px solid var(--rule);
    background:var(--ink); cursor:pointer;
}
.frame img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.04) saturate(.92); transition:transform .5s ease, filter .3s; }
.frame:hover img{ transform:scale(1.04); filter:contrast(1.1) saturate(1.05); }
.frame figcaption{
    position:absolute; left:0; right:0; bottom:0;
    padding:10px 14px; display:flex; align-items:center; gap:10px;
    background:linear-gradient(to top, rgba(12,11,10,.95), transparent);
    font-family:var(--f-mono); font-size:12px; color:var(--bone-dim);
}
.plat-pill{
    font-family:var(--f-mono); font-size:10px; font-weight:700; letter-spacing:.08em;
    color:var(--ink); background:var(--orange); padding:2px 7px;
}
.frame--feat{ grid-column:span 2; grid-row:span 2; }
.frame--wide{ grid-column:span 2; }
.frame::after{
    content:"⤢"; position:absolute; top:12px; right:14px; z-index:2;
    color:var(--orange); font-size:18px; opacity:0; transition:opacity .25s;
}
.frame:hover::after{ opacity:1; }

/* ---------- CONSOLES ---------- */
.console-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0; border:1px solid var(--rule); }
.console-cell{
    display:flex; align-items:center; gap:12px; padding:14px 16px;
    border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
    background:var(--ink-2); transition:background .15s; cursor:default;
}
.console-cell:hover{ background:var(--ink-3); }
.console-cell img{ width:28px; height:28px; object-fit:contain; flex-shrink:0; }
.console-cell .cn{ font-family:var(--f-mono); font-size:13px; color:var(--bone); }

/* ---------- SHADERS ---------- */
.shader-l{ padding:clamp(48px,7vw,90px) clamp(24px,4vw,56px); display:flex; flex-direction:column; justify-content:center; }
.shader-r{
    background:var(--ink); border-left:1px solid var(--rule);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:40px; position:relative;
}
#spectrum{ width:100%; max-width:520px; height:auto; display:block; }
.spec-label{
    font-family:var(--f-mono); font-size:10px; color:var(--bone-mute);
    letter-spacing:.14em; margin-top:18px;
}
.shader-p{ color:var(--bone-dim); font-size:17px; margin:18px 0 24px; max-width:480px; }

/* ---------- TERMINAL ---------- */
.term{
    background:#08070a; border:1px solid var(--rule);
    font-family:var(--f-mono);
}
.term-tab{
    background:var(--ink-3); padding:10px 16px; border-bottom:1px solid var(--rule);
    font-size:12px; color:var(--bone-mute); letter-spacing:.04em;
}
.term-body{ padding:22px 24px; font-size:13.5px; line-height:1.95; overflow-x:auto; }
.term-body pre{ white-space:pre; }
.t-c{ color:var(--bone-mute); }
.t-p{ color:var(--orange); user-select:none; }
.t-a{ color:var(--lime); }

/* ---------- LOG (vertical-line timeline with nodes) ---------- */
.log{
    list-style:none; position:relative;
    max-width:780px; margin:0 auto;
    padding-left:32px;
}
.log::before{
    content:""; position:absolute; left:7px; top:4px; bottom:4px; width:1px;
    background:linear-gradient(to bottom, var(--orange), var(--lime), transparent);
}
.log li{ position:relative; padding-bottom:36px; }
.log li:last-child{ padding-bottom:0; }
.log li::before{
    content:""; position:absolute; left:-29px; top:4px;
    width:13px; height:13px; border-radius:50%;
    background:var(--ink); border:2px solid var(--orange);
    box-shadow:0 0 0 3px var(--ink-2), 0 0 12px rgba(255,91,31,.6);
}
.log li:nth-child(2)::before{ border-color:var(--lime); box-shadow:0 0 0 3px var(--ink-2), 0 0 12px rgba(200,255,58,.6); }
.log-y{
    display:block; font-family:var(--f-mono); font-size:12px;
    color:var(--orange); letter-spacing:.12em; margin-bottom:8px;
}
.log li:nth-child(2) .log-y{ color:var(--lime); }
.log-card{
    padding:18px 22px; border:1px solid var(--rule);
    background:var(--ink-2); transition:border-color .2s;
}
.log-card:hover{ border-color:var(--rule-2); }
.log-card h4{ font-family:var(--f-display); font-size:17px; margin-bottom:6px; color:var(--bone); letter-spacing:-.01em; }
.log-card p{ color:var(--bone-dim); font-size:15px; }
.log-card p strong{ color:var(--bone); }

/* ---------- CLOSER ---------- */
.closer{ text-align:center; padding:clamp(80px,13vw,150px) 20px; border-top:1px solid var(--rule); }
.closer-title{
    font-family:var(--f-display); font-weight:900;
    font-size:clamp(36px,6vw,72px); line-height:.98; letter-spacing:-.025em;
    margin-bottom:34px; color:var(--bone);
}
.closer-title br + *{ color:var(--orange); }
.closer-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- FOOTER ---------- */
.foot{ border-top:1px solid var(--rule); background:var(--ink-2); padding:48px 20px 32px; }
.foot-inner{ max-width:var(--max); margin:0 auto; text-align:center; }
.foot-mark{ display:inline-flex; align-items:center; gap:1px; font-family:var(--f-display); font-size:18px; margin-bottom:10px; }
.foot-mark .mark-a{ width:22px; height:22px; font-size:13px; }
.foot p{ color:var(--bone-dim); font-size:14px; margin-bottom:18px; }
.foot-nav{ display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.foot-nav a{ font-family:var(--f-mono); font-size:12px; color:var(--orange); letter-spacing:.04em; transition:color .15s; }
.foot-nav a:hover{ color:var(--lime); }
.foot-copy{ font-family:var(--f-mono); font-size:11px; color:var(--bone-mute); }

/* ---------- LIGHTBOX ---------- */
.lightbox{
    position:fixed; inset:0; z-index:200; background:rgba(8,7,6,.96);
    display:none; align-items:center; justify-content:center; padding:5vh 5vw;
}
.lightbox.open{ display:flex; animation:lb-in .2s ease; }
@keyframes lb-in{ from{ opacity:0; } }
.lightbox img{ max-width:92vw; max-height:86vh; border:1px solid var(--orange); }
.lb-x,.lb-prev,.lb-next{
    position:absolute; background:var(--ink); border:1px solid var(--rule-2);
    color:var(--bone); font-family:var(--f-mono); font-size:14px;
    letter-spacing:.06em; padding:10px 16px; cursor:pointer; transition:all .15s;
}
.lb-x{ top:24px; right:24px; }
.lb-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lb-next{ right:24px; top:50%; transform:translateY(-50%); }
.lb-x:hover,.lb-prev:hover,.lb-next:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
    .dl-grid{ grid-template-columns:repeat(2,1fr); }
    .compat-grid{ grid-template-columns:1fr; }
    .wall{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:880px){
    .hero-grid{ grid-template-columns:1fr; }
    .sect--feature{ grid-template-columns:1fr; }
    .shader-r{ border-left:0; border-top:1px solid var(--rule); }
    .nav-rail{ display:none; }
    .frag-band{ grid-template-columns:1fr; gap:24px; justify-items:center; text-align:center; }
    .frag-side--r{ align-items:center; }
}
@media (max-width:640px){
    body{ font-size:15px; }
    .statusbar{ overflow-x:auto; white-space:nowrap; }
    .statusbar-cell{ flex-shrink:0; }
    .sb-clock{ margin-left:0; }
    .snd-chip{ padding-left:16px; }
    .dl-grid{ grid-template-columns:1fr; }
    .wall{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
    .frame--feat,.frame--wide{ grid-column:span 2; }
    .frame--feat{ grid-row:span 1; }
    .log li{ padding-bottom:28px; }
    .nav-gh span{ display:none; }
    .mark-lac{ display:none; }
}
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation:none!important; transition:none!important; }
}