/* ===== Base ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #050513;
  --bg-soft: #0c0b17;
  --accent: #ff9ad9;
  --accent-soft: rgba(255, 154, 217, 0.13);
  --accent-2: #ffcfef;
  --text: #fdf7ff;
  --muted: #b5adcb;
  --border: rgba(255, 255, 255, 0.08);
  --radius-lg: 20px;
  --radius-sm: 12px;
  --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.75);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ===== Background layers ===== */

.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* order: gradient -> stars -> shader -> grain -> portraits -> content */
.bg-gradient { z-index: -5; }
.bg-stars    { z-index: -4; }
.bg-reentry  { z-index: -3; } /* WebGL canvas */

/* gradient */
.bg-gradient {
  background:
    radial-gradient(circle at top left, #ff9ad9 0, transparent 45%),
    radial-gradient(circle at bottom right, #7a5cff 0, transparent 45%),
    linear-gradient(180deg, #050513 0, #050509 100%);
}

/* simple star field using box-shadows on pseudo-elements */
.bg-stars::before,
.bg-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  box-shadow:
    20vw 10vh 1px rgba(255, 255, 255, 0.8),
    60vw 30vh 1px rgba(255, 204, 255, 0.7),
    80vw 70vh 1px rgba(200, 210, 255, 0.8),
    10vw 80vh 1px rgba(255, 255, 255, 0.6),
    45vw 50vh 1px rgba(255, 230, 255, 0.9);
  opacity: 0.7;
}

.bg-stars::after {
  box-shadow:
    30vw 20vh 1px rgba(255, 255, 255, 0.6),
    70vw 15vh 1px rgba(255, 210, 240, 0.7),
    15vw 60vh 1px rgba(220, 230, 255, 0.8),
    50vw 85vh 1px rgba(255, 255, 255, 0.7);
  animation: twinkle 6s ease-in-out infinite alternate;
}



@keyframes twinkle {
  0%   { opacity: 0.4; }
  100% { opacity: 0.9; }
}

/* ===== Layout shells ===== */

.page-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 16px 40px;
}

.main {
  display: flex;
  justify-content: center;
  position: relative;
}

/* ===== Header ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(5, 5, 20, 0.92),
    rgba(5, 5, 20, 0.75),
    rgba(5, 5, 20, 0.92)
  );
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.logo-text {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav {
  display: flex;
  gap: 18px;
  font-size: 14px;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.16s ease-out;
}

.site-nav a:hover::after {
  width: 100%;
}

/* ===== Glass main panel ===== */

.glass-panel {
  position: relative;
  max-width: 720px;
  width: 100%;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 154, 217, 0.06), transparent 55%),
    radial-gradient(circle at bottom right, rgba(122, 92, 255, 0.05), transparent 55%),
    rgba(8, 7, 20, 0.9);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-soft);
  padding: 24px 22px 20px;
}

/* ===== Sections ===== */

.section {
  margin-bottom: 28px;
}

.section:last-of-type {
  margin-bottom: 16px;
}

.section-hero {
  margin-bottom: 30px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 6px;
}

h1 {
  font-size: clamp(28px, 4vw, 36px);
  margin: 0 0 10px;
}

h2 {
  font-size: 20px;
  margin: 0 0 8px;
}

h3 {
  font-size: 17px;
  margin: 0 0 6px;
}

.about-info {
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.6;
}
.about-info strong {
  color: var(--accent-2);
  font-weight: 600;
}

strong {
  color: var(--accent-2);
  font-weight: 600;
}

.lead {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.section-intro {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.6;
}

p {
  margin: 0 0 8px;
  line-height: 1.6;
}

/* ===== Blog posts ===== */

.post-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 12px 12px 10px;
  background: linear-gradient(145deg, rgba(14, 12, 30, 0.96), rgba(18, 14, 38, 0.96));
  margin-top: 10px;
}

.post-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ===== Projects ===== */

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.project-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(12, 11, 26, 0.96), rgba(17, 14, 34, 0.96));
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 8px;

  align-items: center; /* <-- NEW */
}

/* Row 1: icon + title */
.project-header {
  grid-column: 1 / 3;        /* span icon + text columns */
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-header h3 {
  margin: 0;
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.5em; /* smaller for mobile users otherwise the header wraps around*/
  }
}

/* Row 2: text + tags (left) */
.project-body {
  grid-column: 2;            /* middle column */
  grid-row: 2;
}

.project-body p {
  margin: 0 0 6px;
}

.project-thumb {
  grid-row: 1 / span 2; /* <-- NEW: spans both rows */
  grid-column: 3;

  width: 80px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);

  justify-self: center;
  align-self: center;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* (optional) small hover glow for the thumbnail */
.project-thumb:hover {
  border-color: var(--accent-2);
  transform: translateY(-1px);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Mobile: stack things instead of cramming */
@media (max-width: 700px) {
  .project-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .project-header {
    grid-column: 1;
  }

  .project-body {
    grid-column: 1;
  }

  .project-thumb {
    grid-column: 1;
    justify-self: flex-start;
    margin-top: 4px;
  }
}

.project-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;         
  border: none;             
}

.project-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

/* ===== Links ===== */

.link-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.link-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.link-label {
  min-width: 70px;
  font-weight: 500;
  color: var(--muted);
}

.link-list a {
  color: var(--accent-2);
  text-decoration: none;
}

.link-list a:hover {
  text-decoration: underline;
}

.link-multi {
  display: flex;
  flex-direction: column;
  gap: 2px; /* small vertical spacing between the two links */
}


/* ===== Footer ===== */

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 10px;
  padding-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ===== Responsive tweaks ===== */

@media (max-width: 900px) {
  .site-header {
    border-radius: 18px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-shell {
    padding-inline: 12px;
  }

  .glass-panel {
    padding-inline: 16px;
  }
}

@media (max-width: 700px) {
  .project-card {
    /* stop using the 3-column grid on mobile */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .project-header {
    margin-bottom: 6px;
  }

  .project-body {
    width: 100%;
  }

  .project-thumb {
    align-self: flex-start;  /* keep it left-aligned */
    margin-top: 10px;
  }
}