:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #444444;
  --link: #090A4D; /* Abistama blue */
  --border: #000000;
  --accent-pink: #C74784; /* Abistama pink */
  --accent-blue: #090A4D; /* Abistama blue */
  --maxw: clamp(20rem, 80vw, 80rem); /* responsive width */
  --logo-src: url('img/abistama_color_small.png'); /* Default logo */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0b;
    --fg: #f4f4f5;
    --muted: #b0b0b0;
    --link: #C74784; /* Pink links in dark mode */
    --border: #f4f4f5;
    --accent-blue: #C74784; /* Use pink instead of blue in dark mode */
    --logo-src: url('img/abistama_white_small.png'); /* White logo for dark mode */
  }
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Silkscreen', monospace;
  font-size: clamp(12px, 1.2vw, 16px);
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(12px, 2vw, 24px); }

header {
  border-bottom: 2px dashed var(--border);
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: clamp(8px, 1vw, 12px); text-decoration: none; color: var(--accent-blue); font-weight: 700; }
.logo { height: clamp(40px, 4vw, 60px); display: inline-block; }

.hero { 
  padding: clamp(30px, 5vw, 60px) 0 clamp(20px, 3vw, 40px); 
  text-align: center; 
  border: 2px solid var(--border); 
  margin-bottom: clamp(20px, 3vw, 40px); 
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-pink) 100%);
  color: white;
}
.hero h1 {
  font-size: clamp(14px, 2vw, 24px);
  line-height: 1.6;
  margin: 0;
  white-space: pre-line;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.projects { margin-bottom: clamp(20px, 3vw, 40px); }
.projects h2 {
  font-size: clamp(10px, 1.5vw, 16px);
  text-transform: uppercase;
  border-bottom: 2px dashed var(--accent-pink);
  padding-bottom: 4px;
  margin: 0 0 clamp(10px, 2vw, 20px);
  font-weight: 700;
  color: var(--accent-blue);
}

.list { display: grid; gap: clamp(8px, 1.5vw, 16px); }

.item { 
  border: 1px solid var(--border); 
  padding: clamp(8px, 1.5vw, 16px); 
  background: var(--bg); 
  transition: all 0.2s ease;
}
.item:hover {
  border-color: var(--accent-pink);
  box-shadow: 0 2px 8px rgba(199, 71, 132, 0.1);
}
.item__name { 
  font-weight: 700; 
  font-size: clamp(12px, 1.5vw, 18px); 
  margin-bottom: clamp(4px, 0.8vw, 8px); 
  font-family: 'Silkscreen', monospace; 
  color: var(--accent-blue);
}
.item__desc { 
  color: var(--muted); 
  font-size: clamp(10px, 1.2vw, 14px); 
  margin: 0 0 clamp(6px, 1vw, 10px); 
  font-weight: 400; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; 
}
.item__link { 
  text-decoration: underline; 
  color: var(--link); 
  font-size: clamp(10px, 1.2vw, 14px); 
  font-weight: 700; 
  font-family: 'Silkscreen', monospace; 
  transition: color 0.2s ease;
}
.item__link:hover {
  color: var(--accent-pink);
}

/* Retro meta rows */
.meta { list-style: none; padding: 0; margin: 0 0 clamp(6px, 1vw, 10px); }
.meta li { display: block; font-size: clamp(10px, 1.2vw, 14px); color: var(--fg); font-weight: 700; font-family: 'Silkscreen', monospace; }
.k { 
  display: inline-block; 
  min-width: clamp(100px, 8vw, 120px); 
  color: var(--accent-blue);
}
.sep { opacity: 0.6; padding: 0 clamp(4px, 0.5vw, 6px); }

.tags { font-size: clamp(10px, 1.2vw, 14px); color: var(--muted); margin: clamp(4px, 0.8vw, 8px) 0; }

footer {
  border-top: 2px dashed var(--accent-pink);
  padding-top: clamp(8px, 1.5vw, 16px);
  font-size: clamp(10px, 1.2vw, 14px);
  color: var(--muted);
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}