/* Aleph Null Media — landing page styles (control-panel layout, after
   ref/alephnull-control-panel-v24.html). Brand tokens from aleph-null-media-ui,
   library fonts (Barlow Condensed + JetBrains Mono), no CDNs. Neon set mapped to
   brand accents (orange/yellow -> amber). */

:root{
  /* Surfaces */
  --bg:#0a0c11; --panel:#11141b; --panel2:#161a23; --line:#1d2230; --line2:#2a3142;
  /* Text (muted tones lifted to meet WCAG AA contrast on --bg) */
  --txt:#e7ecf3; --dim:#8a94a2; --dimmer:#737d8d;
  /* Accents (brand tokens; --o/--y collapse to amber) */
  --o:#ffb000; --c:#00d4ff; --m:#ff2d7a; --l:#bfff00; --y:#ffb000; --rec:#ff3344;
  /* Type — library fonts */
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --disp:"Barlow Condensed",Helvetica,Arial,sans-serif;
  --sans:"Barlow Condensed",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--txt);font-family:var(--mono);font-size:14px;
  line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px;}

/* keyboard focus rings */
a:focus-visible,button:focus-visible{outline:2px solid var(--c);outline-offset:2px;}
.o{color:var(--o)} .c{color:var(--c)} .m{color:var(--m)} .l{color:var(--l)} .y{color:var(--y)}

/* hazard tape divider */
.hazard{height:16px;width:100%;
  background:repeating-linear-gradient(45deg,var(--HZ,var(--o)) 0 18px,transparent 18px 36px),#0c0d10;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ---------- HUD ---------- */
.hud{position:sticky;top:0;z-index:50;background:rgba(10,12,17,.9);
     backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.hud-in{display:flex;align-items:center;gap:16px;height:52px;}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;
       letter-spacing:.08em;font-size:18px;text-transform:uppercase;white-space:nowrap;}
.brand .glyph{width:22px;height:22px;background:center/contain no-repeat;flex:0 0 auto;}
.brand .bk{color:var(--txt);}
.nav{margin-left:auto;display:flex;gap:2px;}
.nav a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
       padding:7px 11px;border:1px solid transparent;transition:.15s;}
.nav a:hover{color:var(--txt);border-color:var(--line2);}
.nav a.ig{display:inline-block;width:34px;height:30px;background:url('../instagram.svg') center / 16px 16px no-repeat;opacity:.6;border:1px solid transparent;}
.nav a.ig:hover{opacity:1;border-color:var(--line2);}

/* ---------- MARQUEE ---------- */
.strip{background:var(--m);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;}
.strip:active{cursor:grabbing;}
.strip:focus-visible{outline:2px solid #0a0b0d;outline-offset:-3px;}
.marq{display:flex;align-items:center;white-space:nowrap;padding:8px 22px;will-change:transform;}
.marq-seq{display:inline-flex;align-items:center;}
.marq span{font-size:11px;font-weight:600;letter-spacing:.14em;color:#0a0b0d;text-transform:uppercase;}
/* styled separator — a slanted slash mark, not a "/" character */
.marq .sep{flex:0 0 auto;width:2px;height:12px;background:#0a0b0d;opacity:.55;
           transform:skewX(-20deg);margin:0 20px;border-radius:1px;}

/* ---------- MASTHEAD ---------- */
/* top padding only; the following section's top padding balances the bottom */
.masthead{padding:48px 0 0;}
.mh-h{font-family:var(--disp);font-weight:700;text-transform:uppercase;
      font-size:clamp(30px,5.4vw,64px);line-height:.95;letter-spacing:.005em;}
.mh-p{color:var(--dim);font-size:14.5px;line-height:1.8;margin-top:18px;max-width:62ch;}
.mh-p b{color:var(--txt);font-weight:600;}
.mh-p b.l{color:var(--l);}

/* ---------- SECTIONS ---------- */
.sec{padding:48px 0;}
.sec-head{display:flex;align-items:flex-end;gap:14px;border-bottom:2px solid var(--HL,var(--o));
          padding-bottom:14px;margin-bottom:24px;}
.sec-head h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;
             letter-spacing:.005em;font-size:clamp(22px,3.4vw,36px);}

/* filters */
.filters{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);background:var(--panel2);border:1px solid var(--line);padding:7px 13px;cursor:pointer;transition:.15s;}
.filters button:hover{color:var(--txt);}
.filters button.active{background:var(--txt);color:var(--bg);border-color:var(--txt);}

/* craft-select */
.select{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border:1px solid var(--line);}
.craft{padding:34px;background:var(--panel);border-right:1px solid var(--line);position:relative;overflow:hidden;}
.craft .bignum{position:absolute;right:-14px;top:-34px;font-family:var(--disp);font-weight:700;
   font-size:170px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--line2);opacity:.5;pointer-events:none;}
.craft .ulabel{font-size:10px;letter-spacing:.22em;color:var(--dimmer);text-transform:uppercase;position:relative;}
.craft .uname{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(28px,4.2vw,48px);
   line-height:.92;letter-spacing:.005em;margin:6px 0 10px;color:var(--txt);position:relative;}
.craft .uclass{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cc);position:relative;}
.craft .ublurb{color:var(--dim);font-size:13px;line-height:1.7;margin:18px 0 24px;max-width:48ch;position:relative;}
.ulaunch{display:inline-flex;align-items:center;gap:10px;background:var(--cc);color:#08090b;
   font-family:var(--sans);font-weight:700;letter-spacing:.06em;padding:14px 22px;font-size:15px;line-height:1;
   border:1px solid var(--cc);cursor:pointer;transition:.15s;text-transform:uppercase;position:relative;}
.ulaunch:hover{background:transparent;color:var(--cc);}
.ulaunch .tri{border-left-color:#08090b;}
.ulaunch:hover .tri{border-left-color:var(--cc);}

.roster{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;
        scrollbar-width:thin;scrollbar-color:var(--dim) var(--panel2);}
.roster::-webkit-scrollbar{height:8px;}
.roster::-webkit-scrollbar-track{background:var(--panel2);}
.roster::-webkit-scrollbar-thumb{background:var(--dim);border-radius:4px;}
.unit{padding:14px 16px 13px;border:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
      background:transparent;color:inherit;font:inherit;text-align:left;width:100%;
      appearance:none;-webkit-appearance:none;
      cursor:pointer;position:relative;transition:.14s;display:flex;flex-direction:column;gap:4px;
      min-height:86px;justify-content:center;}
.unit:focus-visible{outline:2px solid var(--c);outline-offset:-2px;z-index:2;}
.roster .unit:nth-child(2n){border-right:none;}
.unit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cc);opacity:.3;transition:.14s;}
.unit:hover{background:var(--panel2);}
.unit.sel{background:var(--panel2);}
.unit.sel::before{opacity:1;width:5px;}
.unit .ucode{font-size:10px;letter-spacing:.1em;color:var(--dimmer);}
.unit .un{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--txt);text-transform:uppercase;line-height:1.05;}
.unit .ut{font-size:9px;letter-spacing:.12em;color:var(--cc);text-transform:uppercase;}
.unit.hidden{display:none;}
.unit .smark{position:absolute;right:12px;top:13px;font-size:8px;letter-spacing:.12em;color:var(--o);opacity:0;}
.unit.sel .smark{opacity:1;}
.craft.launched{animation:pulse .5s ease;}
@keyframes pulse{0%{box-shadow:inset 0 0 0 0 var(--cc)}35%{box-shadow:inset 0 0 0 2px var(--cc)}100%{box-shadow:inset 0 0 0 0 transparent}}
.tri{width:0;height:0;border-left:8px solid var(--cc);border-top:5px solid transparent;border-bottom:5px solid transparent;}

/* ---------- CONTACT ---------- */
.contact{border:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:1fr 1fr;}
.contact .c-left{padding:42px;border-right:1px solid var(--line);}
.c-sub{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:.01em;color:var(--txt);text-transform:uppercase;}
.contact p{color:var(--dim);margin-top:12px;line-height:1.8;max-width:42ch;}
.c-right{padding:42px;display:flex;flex-direction:column;justify-content:center;}
.intent{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.intent button{flex:1;min-width:92px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);background:var(--panel2);border:1px solid var(--line);
  padding:9px 10px;cursor:pointer;transition:.14s;}
.intent button:hover{color:var(--txt);}
.intent button.active{background:var(--c);color:#06120f;border-color:var(--c);}
.ffield{display:block;margin-bottom:13px;}
.ffield>span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.ffield input,.ffield textarea{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--txt);
  font-family:var(--mono);font-size:13px;padding:11px 12px;outline:none;transition:border-color .15s;resize:vertical;}
.ffield input:focus,.ffield textarea:focus{border-color:var(--c);}
.ffield input::placeholder,.ffield textarea::placeholder{color:var(--dim);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.org{display:none;}
.org.show{display:block;}
/* honeypot — off-screen, never shown to humans */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.ferr{color:var(--rec);font-size:11px;letter-spacing:.03em;min-height:16px;margin-bottom:6px;}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:8px;background:var(--c);color:#06120f;
     font-family:var(--sans);font-weight:700;letter-spacing:.05em;padding:14px 22px;font-size:15px;line-height:1;
     text-transform:uppercase;transition:.15s;border:1px solid var(--c);cursor:pointer;align-self:flex-start;}
.cta:hover{background:transparent;color:var(--c);}
.cta .tri{border-left-color:#06120f;}
.cta:hover .tri{border-left-color:var(--c);}
.sent-big{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(22px,3vw,34px);
          color:var(--c);letter-spacing:.005em;line-height:.98;}
.sent p{color:var(--dim);margin-top:12px;line-height:1.7;max-width:42ch;}
.sent-again{margin-top:20px;background:none;border:none;color:var(--dim);font-family:var(--mono);
            font-size:12px;letter-spacing:.08em;cursor:pointer;padding:0;}
.sent-again:hover{color:var(--c);}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:18px 0;}
.foot{font-size:11px;letter-spacing:.06em;color:var(--dimmer);}


@media(max-width:980px){
  .select{grid-template-columns:1fr;}
  .roster{order:1;display:flex;overflow-x:auto;border-bottom:1px solid var(--line);scroll-snap-type:x proximity;}
  .roster .unit{flex:0 0 auto;width:180px;border-right:1px solid var(--line);border-bottom:none;scroll-snap-align:start;}
  .roster .unit:nth-child(2n){border-right:1px solid var(--line);}
  .craft{order:2;border-right:none;min-height:0;}
  .contact{grid-template-columns:1fr;}
  .c-right{border-left:none;border-top:1px solid var(--line);}
  .contact .c-left{border-right:none;border-bottom:1px solid var(--line);}
}
@media(max-width:620px){
  .frow{grid-template-columns:1fr;}
  .brand{font-size:15px;letter-spacing:.05em;}
}
@media(max-width:400px){
  .brand{font-size:13px;gap:6px;}
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }