/* KL5 NETWORKS — house stylesheet.
   Premise: the network went public in 1986, so by 1993 the web is a mature
   interface medium, not a document format. Dark CRT ground, chrome bevels,
   corner-bracketed panels, monospace readouts, cyan hairlines. Hard edges
   throughout — nothing rounded, nothing soft. */

:root{
  --void:#060a14; --panel:#0c1526; --panel2:#122040; --navy:#0B2C6F;
  --cyan:#00E5FF; --cyan-dim:rgba(0,229,255,.30); --edge:rgba(120,170,235,.22);
  --text:#c6d3ea; --bright:#eaf2ff; --dim:#7c8db0;
  --head:"Eurostile","Square721 BT","Univers Condensed","Arial Narrow",Helvetica,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Lucida Console","DejaVu Sans Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;color:var(--text);font:16px/1.65 var(--body);
  background:
    radial-gradient(1200px 600px at 50% -10%,#12233f 0%,transparent 60%),
    var(--void);}
/* CRT scanlines — very low contrast, purely atmospheric */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.030) 0 1px,transparent 1px 3px)}
img{max-width:100%;display:block}
a{color:var(--cyan)}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---- masthead ---------------------------------------------------- */
.masthead{background:linear-gradient(180deg,#0d1a35,#070e1d);
  border-bottom:1px solid var(--edge);box-shadow:0 1px 0 rgba(0,229,255,.18)}
.masthead .wrap{display:flex;align-items:center;gap:22px;padding:20px 24px}
.masthead img{height:54px;width:auto}
.masthead .tag{margin-left:auto;text-align:right;color:var(--dim);
  font:600 10px/1.6 var(--head);letter-spacing:.3em;text-transform:uppercase}

/* ---- nav: clipped tabs ------------------------------------------- */
nav{background:#08101f;border-bottom:1px solid var(--edge)}
nav ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
nav a{display:block;padding:14px 22px;color:var(--text);text-decoration:none;
  font:600 11px/1 var(--head);letter-spacing:.22em;text-transform:uppercase;
  border-right:1px solid rgba(120,170,235,.14);position:relative}
nav a:hover{color:var(--bright);background:rgba(0,229,255,.07)}
nav a[aria-current]{color:var(--void);background:var(--cyan);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}

/* Wide: no disclosure at all. The checkbox is display:none so it is not
   a stray tab stop, and the list is simply the row of tabs. */
nav .navtoggle,nav .navbtn{display:none}

/* Narrow: eight tabs wrap to four rows and eat the screen, so they
   collapse behind one bar. A checkbox rather than <details>, which
   collapses its content with content-visibility that `display` cannot
   override — that would have hidden the desktop nav too. The input stays
   in the accessibility tree and the tab order; only its pixels go. */
@media (max-width:760px){
  nav .navtoggle{display:block;position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
  nav .navbtn{display:flex;align-items:center;gap:12px;cursor:pointer;
    padding:14px 22px;color:var(--bright);
    font:600 11px/1 var(--head);letter-spacing:.22em;text-transform:uppercase}
  /* three bars, drawn as a gradient so all three land on exact pixels */
  nav .navbtn::before{content:"";width:16px;height:12px;flex:0 0 auto;
    background:linear-gradient(var(--cyan) 0 2px,transparent 2px 5px,
      var(--cyan) 5px 7px,transparent 7px 10px,var(--cyan) 10px 12px)}
  nav .navbtn::after{content:"\25BE";margin-left:auto;color:var(--cyan)}
  nav .navtoggle:checked ~ .navbtn{background:rgba(0,229,255,.07)}
  nav .navtoggle:checked ~ .navbtn::after{content:"\25B4"}
  /* the label is what you click, so put the focus ring on it */
  nav .navtoggle:focus-visible ~ .navbtn{outline:2px solid var(--cyan);
    outline-offset:-2px}
  nav .navtoggle:not(:checked) ~ ul{display:none}
  nav ul{flex-direction:column;border-top:1px solid var(--edge)}
  nav a{border-right:0;border-bottom:1px solid rgba(120,170,235,.14)}
  /* the clipped corner reads as damage on a full-width row */
  nav a[aria-current]{clip-path:none}
}

/* ---- status strip ------------------------------------------------ */
.statusbar{background:#050b16;border-bottom:1px solid var(--edge)}
.statusbar .wrap{display:flex;flex-wrap:wrap;gap:28px;padding:9px 24px;
  font:12px/1 var(--mono);color:var(--dim);letter-spacing:.06em}
.statusbar b{color:var(--cyan);font-weight:400}
.statusbar .ok::before{content:"";display:inline-block;width:7px;height:7px;
  margin-right:8px;background:var(--cyan);box-shadow:0 0 7px var(--cyan)}
.statusbar .right{margin-left:auto}

/* ---- hero -------------------------------------------------------- */
.hero{position:relative;border-bottom:1px solid var(--edge)}
.hero img{width:100%}
/* The hero is a fixed 3:1 image, so its height is 33.3vw — sit the copy
   in the upper third of that rather than dead centre, which drops it into
   the kiosk and the figures. vw keeps the offset proportional as the
   image scales. */
.hero .copy{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-start;padding:clamp(16px,8vw,170px) 7% 0;
  background:linear-gradient(90deg,rgba(4,9,20,.88) 0%,rgba(4,9,20,.45) 46%,transparent 72%)}
/* Narrow screens: the headline has a 22px floor while the image keeps
   shrinking, so the upper third stops being big enough to hold it.
   Centre it again rather than let it crowd the lower edge. */
@media (max-width:760px){.hero .copy{justify-content:center;padding-top:0}}
.hero h1{margin:0;color:var(--bright);font:700 clamp(22px,4.4vw,54px)/1.04 var(--head);
  letter-spacing:.03em;text-transform:uppercase;max-width:15em;
  text-shadow:0 0 34px rgba(0,229,255,.30)}
.hero p{margin:16px 0 0;color:var(--cyan);font:600 clamp(10px,1.25vw,14px)/1.4 var(--head);
  letter-spacing:.34em;text-transform:uppercase}

/* ---- sections ---------------------------------------------------- */
main{padding:52px 0 80px}
section{margin-bottom:54px}
h2{display:flex;align-items:center;gap:14px;margin:0 0 22px;
  font:700 12px/1 var(--head);letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}
h2::before{content:"";width:10px;height:14px;background:var(--cyan);flex:0 0 auto;
  box-shadow:0 0 10px var(--cyan-dim)}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--cyan-dim),transparent)}
h3{margin:0 0 10px;color:var(--bright);font:700 16px/1.3 var(--head);
  letter-spacing:.1em;text-transform:uppercase}
p{margin:0 0 15px;max-width:70ch}
.lede{font-size:19px;line-height:1.6;color:var(--bright)}

.grid{display:grid;gap:24px;align-items:start}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* gallery: crop every frame to one ratio so rows line up */
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{min-height:3.1em;display:flex;align-items:center}

/* corner-bracketed panel */
.card,figure,.notice,table{position:relative;background:var(--panel);
  border:1px solid var(--edge)}
.card::before,.card::after,figure::before,figure::after{content:"";position:absolute;
  width:12px;height:12px;border:2px solid var(--cyan);pointer-events:none}
.card::before,figure::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.card::after,figure::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.card{margin:0}
.card .pad{padding:20px}
.card p{font-size:15px;color:var(--dim);margin-bottom:0}
figure{margin:0}
figcaption{padding:11px 15px;border-top:1px solid var(--edge);color:var(--dim);
  font:600 10px/1.5 var(--head);letter-spacing:.2em;text-transform:uppercase}

/* ---- stat readouts ----------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--edge);border:1px solid var(--edge)}
.stat{background:linear-gradient(180deg,var(--panel2),var(--panel));padding:24px 18px;text-align:center}
.stat b{display:block;color:var(--cyan);font:400 38px/1 var(--mono);
  letter-spacing:.02em;text-shadow:0 0 18px var(--cyan-dim)}
.stat span{display:block;margin-top:10px;color:var(--dim);
  font:600 9px/1.5 var(--head);letter-spacing:.24em;text-transform:uppercase}

/* ---- tables as data readouts ------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:15px}
caption{text-align:left;padding:0 0 12px;color:var(--dim);
  font:600 10px/1.5 var(--head);letter-spacing:.24em;text-transform:uppercase}
th{background:#0a1327;color:var(--cyan);text-align:left;
  padding:12px 16px;border-bottom:1px solid var(--cyan-dim);
  font:600 10px/1 var(--head);letter-spacing:.22em;text-transform:uppercase}
td{padding:12px 16px;border-top:1px solid rgba(120,170,235,.12)}
tbody tr:nth-child(even) td{background:rgba(120,170,235,.045)}
td.num,.mono{text-align:right;font-family:var(--mono);color:var(--bright);
  font-variant-numeric:tabular-nums}

/* ---- controls ---------------------------------------------------- */
/* `hidden` must win over a class that sets display -- .btn below sets
   inline-block, which made the beta's hidden SIGN OUT button show to
   visitors who were not signed in. */
[hidden]{display:none !important}
.btn{display:inline-block;text-decoration:none;padding:14px 28px;
  color:var(--void);background:linear-gradient(180deg,#7ff2ff,var(--cyan));
  border:1px solid #9df6ff;border-bottom-color:#0093a8;border-right-color:#0093a8;
  font:700 11px/1 var(--head);letter-spacing:.24em;text-transform:uppercase}
.btn:hover{background:linear-gradient(180deg,#b6f7ff,#4beeff)}
.btn:active{border-color:#0093a8 #9df6ff #9df6ff #0093a8}
.btn.ghost{background:transparent;color:var(--cyan);border:1px solid var(--cyan-dim)}
.btn.ghost:hover{background:rgba(0,229,255,.10)}
.btn[aria-disabled]{filter:grayscale(.7);opacity:.55;pointer-events:none}
.notice{padding:17px 21px;border-left:3px solid var(--cyan);font-size:15px;color:var(--dim)}
/* a key sequence or value typed exactly, inline in running text -- .mono is
   right-aligned for table readouts, so it cannot do this job */
.kbd{font-family:var(--mono);color:var(--bright);background:#050b16;border:1px solid var(--edge);
  padding:1px 7px;white-space:nowrap}

/* ---- form controls ----------------------------------------------- */
/* Only the provisioning form uses these. Browser defaults are a white
   box on a dark CRT ground, which reads as a hole in the page; these make
   an input look like the readouts above it. Mono throughout, because
   every field on that form is something you type exactly. */
form label{display:block;color:var(--dim);
  font:600 10px/1.8 var(--head);letter-spacing:.22em;text-transform:uppercase}
form input,form select,form textarea{display:block;width:100%;margin-top:5px;
  padding:11px 13px;background:#050b16;color:var(--bright);
  border:1px solid var(--edge);border-top-color:rgba(120,170,235,.10);
  font:15px/1.5 var(--mono);letter-spacing:normal;text-transform:none}
form textarea{resize:vertical}
form select{appearance:none;
  /* the caret, drawn rather than fetched: two edges of a cyan square */
  background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),
    linear-gradient(135deg,var(--cyan) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}
form input:focus,form select:focus,form textarea:focus{outline:none;
  border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan-dim)}
form ::placeholder{color:#5e6d8c;opacity:1}
/* .btn is written for an <a>; a <button> needs the reset too */
button.btn{cursor:pointer;appearance:none}

/* ---- footer ------------------------------------------------------ */
footer{background:#050b16;border-top:1px solid var(--edge);padding:44px 0;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between}
footer strong{color:var(--bright);letter-spacing:.08em}
footer a{color:var(--cyan);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fine{color:var(--dim);font:600 9px/1.9 var(--head);
  letter-spacing:.2em;text-transform:uppercase}