:root{
  --deep-slate:#3d3d3d;
  --binary:#bcdb8f;
  --eye-patch:#252423;
  --caledonia:#0a6b37;
  --white:#ffffff;
  --max-width:900px;
  --shadow:0 8px 18px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--deep-slate);
  color:#e6e6e6;
  font-family:"IBM Plex Mono","Courier New",monospace;
  font-weight:400;
}

/* NAV */
nav{
  background:var(--eye-patch);
  color:var(--binary);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 2rem;
  position:sticky;
  top:0;
  z-index:1000;
}
nav a.site-id{color:var(--binary);font-weight:700;letter-spacing:0.6px;text-decoration:none;}
nav ul{list-style:none;display:flex;gap:1.2rem;margin:0;padding:0;align-items:center;}
nav ul li a{color:var(--binary);text-decoration:none;font-weight:600;padding:6px 8px;border-radius:4px;}
nav ul li a:hover{color:var(--white);background:rgba(255,255,255,0.03);}

/* special library button style */
nav ul li.library a{background:transparent;border:2px solid var(--caledonia);color:var(--white);padding:6px 10px;font-weight:700;}

/* Main container */
main.persona{
  background:#0f0f0f;
  max-width:var(--max-width);
  margin:2.25rem auto;
  padding:2rem;
  border-radius:6px;
  box-shadow:var(--shadow);
  color:#ddd;
}
header h1{color:var(--white);font-size:1.9rem;margin:0 0 1rem 0;}
h2,h3,h4{color:var(--binary);margin:0 0 .6rem 0;}
p{line-height:1.55;margin:0 0 1rem 0;color:#e8e8e8;}

/* Left aligned portrait */
.persona-header{display:flex;gap:1.25rem;align-items:flex-start;}
.persona-header img{width:250px;height:auto;box-shadow:var(--shadow);display:block;}
.persona-content{flex:1;}

/* badges */
.qual-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;}
.qual-list li{background:var(--eye-patch);color:var(--binary);padding:.45rem .9rem;border-radius:6px;font-weight:600;}

/* Home */
.home{background:var(--deep-slate);height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;}
.home img{max-width:420px;width:40vw;height:auto;filter:brightness(1.05);}
.home a button{
  border:2px solid var(--binary);
  background:transparent;
  color:var(--binary);
  padding:.9rem 1.4rem;
  border-radius:8px;
  font-size:1.1rem;
  cursor:pointer;
  font-weight:700;
  font-family: inherit;
}
.home a button:hover{background:var(--eye-patch);color:var(--binary);}

/* loading and you pages */
.loading-screen{background:var(--caledonia);height:100vh;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.2rem;font-family:inherit;}
.you-screen{background:#0500d8;height:100vh;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.2rem;font-family:inherit;text-align:center;padding:2rem;}

/* portrait hover tint */
.portrait-wrapper{position:relative;display:inline-block;}
.portrait-wrapper::after{content:'';position:absolute;inset:0;background:transparent;transition:background 200ms ease;}
.portrait-wrapper:hover::after{background:linear-gradient(rgba(10,107,55,0.18), rgba(10,107,55,0.18));}

/* responsive */
@media (max-width:800px){
  .persona-header{flex-direction:column;}
  .persona-header img{width:100%;max-width:420px;}
  main.persona{margin:1rem;padding:1rem;}
  nav{padding:.7rem 1rem;}
}



/* GLOBAL BACKGROUND (for everything except .home) */
html, body {
  height: 100%;
  margin: 0;
  color: #e6e6e6;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  background: #252423; /* solid dark base */
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}

/* logo pattern for all pages EXCEPT home */
body:not(.home)::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("assets/hardwire_white.png");
  background-repeat: repeat;
  background-size: 160px auto;
  background-attachment: fixed;
  background-position: center;
  opacity: 0.08; /* subtle logo pattern */
  z-index: -1;
  pointer-events: none;
}

/* === CLICKABLE PORTRAITS WITH GREEN HOVER === */
a.portrait-wrapper {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

a.portrait-wrapper img {
  width: 250px;
  height: auto;
  display: block;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease;
}

a.portrait-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background 200ms ease;
}

a.portrait-wrapper:hover::after {
  background: rgba(10, 107, 55, 0.25); /* Caledonia tint */
}

a.portrait-wrapper:hover img {
  transform: scale(1.02);
}