:root{
  --bg: #040805;
  --panel: #08100a;
  --panel-2: #0a140d;
  --line: rgba(114, 255, 163, 0.14);
  --line-strong: rgba(114, 255, 163, 0.26);
  --text: #d7ffd9;
  --text-muted: #8fbe96;
  --text-faint: #52725b;
  --title: #98ff98;
  --bio: #b9ffb9;
  --meta: #74d67f;
  --accent: #7dff9b;
  --pad: 20px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(circle at top right, rgba(120, 255, 160, 0.04), transparent 24%),
    linear-gradient(180deg, #060b07 0%, #020402 100%);
  color: var(--text);
  font-family: var(--mono);
  line-height: 1.55;
  overflow-x: hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(122,255,164,0.03) 0px,
    rgba(122,255,164,0.03) 1px,
    transparent 3px,
    transparent 6px
  );
  opacity:.52;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

.skip{
  position:absolute;
  left:-9999px;
  top:10px;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  background: var(--panel);
  z-index:999;
}
.skip:focus{ left:10px; }

.shell{
  min-height:100vh;
  border:1px solid var(--line);
  background: rgba(2, 5, 3, 0.9);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px var(--pad);
  border-bottom:1px solid var(--line);
  background: rgba(7, 15, 9, 0.94);
}
.topbar__left,
.topbar__right{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}
.prompt{ color: var(--accent); }
.path,
.status{ color: var(--text-faint); }
.cursor{ color: var(--title); animation: blink 1s steps(1,end) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font: inherit;
  color: var(--text-muted);
  border:1px solid var(--line);
  background: transparent;
  min-height: 42px;
  padding:9px 12px;
  cursor:pointer;
}
.btn:hover{
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(114,255,163,0.05);
}

.layout{
  display:grid;
  grid-template-columns: 290px minmax(0, 1fr);
}

.sidebar{
  padding: var(--pad);
  border-right:1px solid var(--line);
  background: linear-gradient(180deg, rgba(7,15,9,0.96), rgba(4,8,5,0.88));
}

.main{
  padding: var(--pad);
}

.panel{
  margin-bottom: 16px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(8,16,10,0.94), rgba(4,9,5,0.88));
}
.panel--primary{
  border-color: rgba(114, 255, 163, 0.22);
  background: linear-gradient(180deg, rgba(10,20,12,0.97), rgba(5,10,6,0.91));
}
.panel--secondary{
  border-color: rgba(114, 255, 163, 0.1);
  background: linear-gradient(180deg, rgba(7,14,8,0.92), rgba(4,8,5,0.82));
}

.panel__header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  color: var(--text-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}
.label{ color: var(--title); }
.panel__body{ padding:14px; }
.panel__body--stack > * + *{ margin-top: 12px; }

.asciiBox{
  margin:0;
  padding:12px;
  border:1px solid var(--line);
  background: rgba(2, 5, 3, 0.62);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.identity{
  margin:0;
  color: var(--bio);
  overflow-wrap: anywhere;
}

.facts{
  margin:14px 0 0 0;
}
.facts__row{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap:8px;
  padding:8px 0;
  border-top:1px solid rgba(114,255,163,0.08);
}
.facts__row:first-child{ border-top:0; }
.facts dt{
  color: var(--text-faint);
}
.facts dd{
  margin:0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.sidebar__links{
  margin-top: 14px;
  padding-top: 12px;
  border-top:1px solid rgba(114,255,163,0.08);
}
.sidebar__links a{
  display:inline-flex;
  align-items:center;
  min-height: 42px;
  color: var(--bio);
}

.lede{
  margin:0 0 14px 0;
  max-width: 70ch;
  color: var(--text-muted);
}

.projList{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:4px;
}
.projList a{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap:10px;
  align-items:baseline;
  min-height: 44px;
  padding:10px 0;
  color: var(--text-muted);
  border-bottom:1px solid rgba(114,255,163,0.08);
}
.projList a:hover{
  color: var(--text);
}

.tag{
  color: var(--meta);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cards{
  display:grid;
  gap:10px;
}

.cardRow{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap:12px;
  padding:14px 0;
  border-top:1px solid rgba(114,255,163,0.1);
}
.cardRow:first-child{
  border-top:0;
  padding-top:0;
}
.cardRow:hover .cardRow__title{
  color: #b7ffb7;
}
.cardRow__title{
  color: var(--title);
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.cardRow__sub{
  margin-top: 3px;
  max-width: 78ch;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cardRow__meta{
  margin-top: 6px;
  color: var(--meta);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.cardRow__arrow{
  color: var(--text-faint);
}

.footer{
  padding-top: 4px;
  color: var(--text-faint);
}

.returnLink{
  display:inline-flex;
  align-items:center;
  min-height: 42px;
  margin-bottom: 10px;
  color: var(--bio);
}

.headline{
  display:grid;
  gap:8px;
}
.projectTitle{
  margin:0;
  color: var(--title);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.projectSubtitle{
  margin:0;
  max-width: 72ch;
  color: var(--bio);
  overflow-wrap: anywhere;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  padding:4px 8px;
  border:1px solid rgba(116,214,127,0.22);
  color: var(--meta);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}

.actionRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cmd{
  display:inline-flex;
  align-items:center;
  min-height: 42px;
  padding:8px 10px;
  border:1px solid var(--line);
  color: var(--text-muted);
}
.cmd:hover{
  color: var(--text);
  border-color: var(--line-strong);
}

.contentGrid{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap:18px;
  align-items:start;
}

.contentSecondary{
  display:grid;
  gap:16px;
}

.mono{
  margin:0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  max-width: 72ch;
  line-height: 1.72;
}

#projectBlurb{
  gap: 28px;
}

#projectBlurb .mono + .mono{
  padding-top: 6px;
  border-top: 1px solid rgba(114,255,163,0.08);
}

.bullets{
  margin:0;
  padding-left:18px;
  color: var(--text-muted);
}
.bullets li + li{
  margin-top: 8px;
}
.bullets--compact{
  font-size: 14px;
  color: var(--text-faint);
}
.bullets--compact li + li{
  margin-top: 10px;
}

.gallery{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.thumb{
  display:block;
  width:100%;
  padding:0;
  border:1px solid var(--line);
  background: transparent;
  cursor:pointer;
}
.thumb img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.thumb:hover{
  border-color: var(--line-strong);
}

.hint{
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 12px;
}

.overlay{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:18px;
  background: rgba(3, 6, 5, 0.92);
}
.overlay[aria-hidden="false"]{ display:grid; }
.overlay__panel{
  width:min(1100px, 96vw);
  border:1px solid var(--line-strong);
  background: #08110d;
}
.overlay__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  color: var(--text-muted);
}
.overlay img{
  display:block;
  width:100%;
  max-height:76vh;
  object-fit:contain;
  background:#000;
}
.overlay__cap{
  padding:10px 12px;
  color: var(--text-muted);
  border-top:1px solid var(--line);
}

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .home .layout{
    grid-template-areas:
      "main"
      "sidebar";
  }
  body:not(.home) .layout{
    grid-template-areas:
      "main"
      "sidebar";
  }
  .home .main{ grid-area: main; }
  .home .sidebar{ grid-area: sidebar; }
  body:not(.home) .main{ grid-area: main; }
  body:not(.home) .sidebar{ grid-area: sidebar; }
  body:not(.home) .sidebar{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  body.home .sidebar{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .contentGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  :root{ --pad: 14px; }
  .shell{ border-left:0; border-right:0; }
  .topbar{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .topbar__left{
    width:100%;
    overflow:hidden;
  }
  .topbar__right{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .prompt,
  .path{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .panel__body{ padding:12px; }
  .facts__row{
    grid-template-columns: 1fr;
    gap:4px;
  }
  .projList a{
    grid-template-columns: 1fr;
    gap:4px;
    align-items:start;
  }
  .gallery{ grid-template-columns: 1fr; }
  .cardRow{
    grid-template-columns: 1fr;
    gap:8px;
  }
  .cardRow__arrow{
    display:none;
  }
  .contentSecondary,
  .contentGrid{
    gap:12px;
  }
  .actionRow{
    flex-direction:column;
    align-items:stretch;
  }
  .actionRow .cmd{
    width:100%;
  }
  .overlay{
    padding:10px;
  }
  .overlay__panel{
    width:100%;
  }
}