/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }

@font-face {
  font-family: "JetBrains Mono";
  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbU2o-flEEny0FZ7Pq9N0Sf0Lw.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

:root{
  --bg: #ffffff;
  --fg: #0b0b0b;
  --muted: #6b6b6b;
  --accent: #000;
  /*--container-max: 1200px;*/
  --gutter: 20px;
}

body{
  font-family: "JetBrains Mono", monospace;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding: 32px 16px;
}

h1{
  color: #a39dff; /* or any color you like */
}

h2{
  color: #ff5a5a; /* or any color you like */
}

.highlight {
  color: #e63946; /* your chosen color */
  font-weight: 600; /* optional, makes it stand out */
}

/* container */
.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header */
.site-header {
  display: block; /* change from flex to block */
  margin-bottom: 20px;
}

.site-title {
  font-size: 28px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  text-align: left; /* ensure left-aligned */
  margin-bottom: 8px;
  max-width: 70%;
}

.site-description {
  font-size: 16px;
  font-weight: 400;
  font-family: "JetBrains Mono", monospace;
  color: #555;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0px;

  max-width: 600px;      /* limits width for better readability */
  line-height: 1.6;      /* makes the text easier to read */
}

.header-flex {
  display: flex;
  align-items: center;        /* vertically center title + logo */
  justify-content: space-between; /* title left, logo right */
  gap: 20px;
  margin-bottom: 20px;
}

.header-left {
  max-width: 70%;             /* keeps title + description from stretching too wide */
}

.header-right .site-logo {
  max-height: 240px;           /* adjust logo size */
  width: auto;                /* maintain aspect ratio */
}

.site-logo-circle {
  position: absolute;       /* take it out of normal flow */
  top: 20px;                /* distance from top */
  right: 20px;              /* distance from right edge */
  
  /*width: 200px;              /* diameter of the circle */
  width: auto;
  
  height: 185px;             /* keep square for perfect circle */
  border-radius: 50%;       /* make it circular */
  object-fit: cover;        /* fills circle without stretching */
  border: 4px solid #a39dff;   /* optional border for style */
  z-index: 1000;            /* above other content */
  background: #a39dff;        /* optional, white circle behind logo */
}

.main-nav{
  margin-left: auto;
  display: flex;
  gap: 16px;
  align-items: center;
}
.nav-link{
  text-decoration: none;
  font-family: var(--serif);
  color: var(--fg);
  font-weight: 600;
  opacity: 0.9;
  transition: opacity .15s ease;
}
.nav-link:hover{ opacity: 1; text-decoration: underline; }

/* Horizontal rule */
.rule{
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ccc, transparent);
  margin: 18px 0;
}

/* Section */
.personal { margin-top: 8px; }
.section-title{
  font-size: 20px;
  margin-bottom: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--sans);
}

/* Card style for items */
.card{
  margin-bottom: 22px;
}
.item-number{
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 700;
  font-family: var(--sans);
}
.item-text{
  font-size: 15px;
  color: var(--muted);
  max-width: 70ch;
}

/* Back link */
.back-link{
  margin-top: 20px;
}
.back-link a{
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.back-link a:hover{ border-bottom-color: #bbb; }

/* responsive logo */
@media (max-width: 870px) {
  .site-logo-circle {
    display: none;
  }
}

/* Responsive fix for smaller screens */
@media (max-width: 768px) {
  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-title-group {
    max-width: 100%;
    text-align: left;
  }

  .site-logo-circle img {
    margin-top: 1rem;
    height: 80px;
  }
}

.image-grid-four {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem; /* space between images */
}

.image-grid-four .grid-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;  /* ensures full width, preserves ratio */
}

/* 3 columns on medium-large screens */
@media (max-width: 1200px) {
  .image-grid-four {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 columns on tablets */
@media (max-width: 800px) {
  .image-grid-four {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Lightbox base styles */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 1000;
}

/* Show state */
.lightbox.visible {
  opacity: 1;
  visibility: visible;
}

/* Optional: a nice zoom effect on the image */
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  transform: scale(0.95);
  transition: transform 0.4s ease;
}

.lightbox.visible img {
  transform: scale(1);
}

.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-footer {
  text-align: center;           /* center the text */
  color: #555;                  /* dark grey */
  font-size: 14px;              /* slightly smaller text */
  margin-top: 20px;             /* spacing from the content above */
  margin-bottom: 20px;          /* spacing from the bottom of the page */
  font-family: "JetBrains Mono", monospace;
  /* border-top: 1px solid #ccc;*/
  padding-top: 4px;
  padding-bottom: 20px;
}