*{box-sizing:border-box}
html{min-height:100%;color-scheme:dark}
body{margin:0;background:#000 url('/assets/bk.jpg') no-repeat top center;color:#fff;font:16px/16px "Trebuchet MS",Arial,Helvetica,sans-serif}
.site{width:min(918px,calc(100% - 48px));margin:25px auto 0}
.header{height:173px;text-align:center;padding-top:35px}
.logo{display:inline-block;width:225px;height:90px}
.logo img{display:block;width:225px;height:90px}
/* Four independent panels; the layout wrapper has no surface or border. */
/* Independent float columns retain menu/main/quick/contact DOM order for mobile and assistive technology. */
.layout{display:flow-root}
.menu-panel,.quick-panel,.contact-panel{float:left;clear:left;width:260px;margin-bottom:18px}
.page{float:right;width:calc(100% - 278px);min-width:0}
.contact-panel{margin-bottom:0}
.panel{
  position: relative;
  border: 1px solid #014a12;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.68);
  box-sizing: border-box;

  overflow: visible;
  padding: 40px 16px 18px 26px;

  z-index: 1;

  /* subtle inner glow (default) */
  box-shadow:
    inset 0 0 18px rgba(0, 255, 59, 0.08),
    inset 0 0 2px rgba(0, 255, 59, 0.18);

  transition: box-shadow 0.25s ease;
}

/* black mask to hide green border in top-left corner */
.panel::after{
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 78px;
  height: 44px;
  background: #000;
  border-top-left-radius: 16px;
  z-index: 6;
  pointer-events: none;
}

/* corner accent */
.panel-accent::before{
  content: "";
  position: absolute;
  top: -13px;
  left: -22px;
  width: 190px;
  height: 95px;
  background: url("/assets/topCornerAccent.png") no-repeat top left;
  background-size: contain;
  pointer-events: none;
  z-index: 10;

  /* hover brighten */
  filter: brightness(1);
  transition: filter 0.25s ease;
}

/* hover states */
.panel:hover{
  box-shadow:
    inset 0 0 22px rgba(0, 255, 59, 0.14),
    inset 0 0 4px rgba(0, 255, 59, 0.28);
}

.panel:hover.panel-accent::before{
  filter: brightness(1.15);
}

/* titles */
.panel-title{
  position: absolute;
  top: 8px;
  right: 16px;
  margin: 0;
  padding: 0;
  color: #00ff3b;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.3px;
  text-align: right;
  z-index: 20;
}

.main-title{
  position: absolute;
  top: 12px;
  right: 16px;
  margin: 0;
  padding: 0;
  color: #00ff3b;
  font-size: 22px;
  font-weight: bold;
  text-align: right;
  z-index: 20;
}

/* layer normal content above accent WITHOUT touching titles */
.panel > :not(.panel-title):not(.main-title){
  position: relative;
  z-index: 20;
}


.panel{min-width:0;min-height:64px;overflow-wrap:anywhere;isolation:isolate}
.nav a{display:block;margin:8px 0;color:#fff;text-decoration:none;line-height:16px}
.nav a:hover{color:#00ff3b;text-decoration:underline}
a:focus-visible,main:focus-visible{outline:2px solid #00ff3b;outline-offset:4px}
.footer{text-align:center;color:rgba(255,255,255,.75);font-size:14px;line-height:1.5;margin:16px auto 24px}
.skip{position:fixed;top:8px;left:8px;transform:translateY(-200%);padding:10px 14px;background:#000;color:#00ff3b;z-index:100}
.skip:focus{transform:none}
@media(max-width:768px){
 .layout{display:flex;flex-direction:column;gap:18px}
 .layout>.panel{float:none;width:100%;margin:0}
 /* DOM and visual order are both menu, main, quick links, contact. */
 .nav{display:block}
 .footer{font-size:12px}
}