/*
Font & Color System:
- Base font size: 1rem (16px)
- Body text: 1rem
- Meta text (dates, etc): 0.9rem
- h1: 2rem (1.8rem on mobile)
- h2: 1.4rem
- h3: 1.2rem
- About section: 1.125rem
- Link: var(--link), hover: var(--link-hover)
- Main text: var(--text)
- Secondary text: var(--text-secondary)
- Headings: h1: var(--lime-bright), h2: var(--lime-light), h3: var(--lime-soft)
*/
:root {
  --background: #121212;
  --surface1: #1e1e1e;
  /* For cards/posts backgrounds */
  --surface2: #252525;
  /* For hover states */

  --text: #e0e0e0;
  /* Main text color */
  --text-secondary: #a0a0a0;
  /* For secondary text like dates */

  --border: rgba(255, 255, 255, 0.12);
  /* Slightly stronger subtle borders */
  --border2: rgba(255, 255, 255, 0.07);
  /* Secondary ultra-subtle borders */

  --accent1: #aaff00;
  /* Muted lime */
  --accent2: #ff4d8b;
  /* Muted pink */

  --lime-bright: #b8f95e;
  /* Slightly softened bright lime for h1 */
  --lime-light: #f0ffd1;
  /* Light lime for h2 */
  --lime-soft: #e6ffd9;
  /* Soft lime for h3 */
  --lime-muted: #b8f95e;
  /* Balanced lime for "Read More" */

  --sage: #c3d9a3;
  /* Lighter sage for nav links */
  --sage-hover: #d5eab5;
  /* Slightly brighter on hover */

  --border-accent: #3a4b30;
  /* Deep gray-lime for optional subtle dividers */

  --link: #b8f95e;
  --link-hover: #cefa8f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "JetBrains Mono", monospace;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.5;
  font-weight: 400;
  font-size: 1rem;
}

nav {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  background-color: var(--surface1);
}

.nav-content {
  margin: 0 0 0 2rem;
  padding: 0 0 0 2rem;
  max-width: 800px;
}

nav a {
  color: var(--sage);
  text-decoration: none;
  margin-right: 2rem;
  font-size: 0.9rem;
}

nav a:hover {
  text-decoration: underline;
}

nav a.active {
  color: var(--lime-soft);
}

header {
  padding: 2rem 0rem;
  text-align: left;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

h1 {
  font-family: "Sixtyfour", monospace;
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: -0.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--lime-bright);
}

.logo {
  height: 2rem;
  width: auto;
  display: block;
}

main {
  max-width: 800px;
  margin: 0 2rem 0 2rem;
  padding: 0 0rem 0 2rem;
}

.about {
  text-align: justify;
  font-size: 1.125rem;
  margin: 1rem 0 1rem;
  line-height: 1.6;
}

.visual-effect {
  position: relative;
  margin: -2rem 0 2rem 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100px;
  font-family: "Courier New", Consolas, Menlo, Monaco, monospace;
}

.header-effect {
  height: 25px;
  margin: 0 0 2rem 0;
}

.blog-posts {
  margin: 2rem 0;
}

h2 {
  margin-bottom: 2rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--lime-light);
}

.posts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.post {
  background: #232323;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.22);
  padding: 1.7rem 1.3rem 1.3rem 1.3rem;
  transition: background 0.18s, box-shadow 0.18s;
  margin-bottom: 0;
  min-height: unset;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.post::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, var(--lime-bright), var(--accent2));
  z-index: 1;
}

.post:hover {
  background: #30303a;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.28);
}

.post-link,
.post-link * {
  text-decoration: none !important;
}

.post-link .read-more {
  text-decoration: underline !important;
}

.post-link {
  display: block;
  height: 100%;
  width: 100%;
  color: inherit;
  cursor: pointer;
}

.post-link:focus {
  outline: 2px solid var(--lime-bright);
  outline-offset: 2px;
}

.post:hover .post-link h3,
.post-link:hover h3 {
  color: var(--lime-bright);
}

.post-link h3 {
  margin: 0 0 0.4rem 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.18s;
}

.post-link time {
  display: block;
  margin: 0 0 0.4rem 0;
  font-size: 0.9rem;
  color: var(--lime-light);
}

.post-link p {
  margin: 0 0 0.6rem 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

.post-link .read-more {
  align-self: flex-start;
  margin: 0;
  font-size: 0.95rem;
  color: var(--lime-bright);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  border-radius: 0;
  transition: color 0.18s;
}

.post-link:hover .read-more {
  color: var(--accent2);
}

footer {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 2rem;
  margin-top: 4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

@media (max-width: 800px) {
  h1 {
    font-size: 1.8rem;
  }

  .about {
    font-size: 0.95rem;
  }

  .posts-grid {
    grid-template-columns: 1fr;
  }
}

/* Update these styles for the update posts */
.update-post {
  margin: 0;
  /* Remove auto margins */
  padding: 0;
  /* Remove padding since main already has it */
}

.update-meta {
  margin-bottom: 2rem;
}

.update-meta h2 {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.update-meta time {
  font-size: 0.9rem;
  opacity: 0.8;
  display: block;
}

.update-meta p.author {
  font-size: 0.9rem;
  opacity: 0.8;
  display: block;
}

.update-content {
  line-height: 1.6;
}

.update-content p {
  margin-bottom: 1.5rem;
}

.update-content h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.update-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.update-content li {
  margin-bottom: 0.5rem;
}

.update-content a,
.post a {
  color: var(--link);
  text-decoration: underline;
  transition: color 0.2s;
}

.update-content a:hover,
.post a:hover {
  color: var(--link-hover);
}

/* Updates Archive Page Styles */
.updates-archive {
  max-width: 800px;
}

.updates-archive h2 {
  margin-bottom: 2rem;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.archive-post {
  position: relative;
  background: #232323;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.22);
  padding: 1.7rem 1.3rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0;
  min-height: unset;
  align-items: flex-start;
  transition: background 0.18s, box-shadow 0.18s;
}

.archive-post::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, var(--lime-bright), var(--accent2));
  z-index: 1;
}

.archive-post:hover {
  background: #30303a;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.28);
}

.archive-post h3 {
  margin: 0 0 0.4rem 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.18s;
}

.archive-post h3 a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.18s;
}

.archive-post h3 a:hover {
  color: var(--lime-bright);
  text-decoration: none;
}

.archive-post time {
  display: block;
  margin: 0 0 0.4rem 0;
  font-size: 0.9rem;
  color: var(--lime-light);
}

.archive-post p {
  margin: 0 0 0.6rem 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

.archive-post .read-more {
  align-self: flex-start;
  margin: 0;
  font-size: 0.95rem;
  color: var(--lime-bright);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  border-radius: 0;
  transition: color 0.18s;
}

.archive-post:hover .read-more {
  color: var(--accent2);
}

.archive-post-link,
.archive-post-link * {
  text-decoration: none !important;
}

.archive-post-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: inherit;
  cursor: pointer;
}

.archive-post-link:focus {
  outline: 2px solid var(--lime-bright);
  outline-offset: 2px;
}

.archive-post:hover .archive-post-link h3,
.archive-post-link:hover h3 {
  color: var(--lime-bright);
}

.archive-post-link .read-more {
  align-self: flex-start;
  margin: 0;
  font-size: 0.95rem;
  color: var(--lime-bright);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  border-radius: 0;
  transition: color 0.18s;
}

.archive-post-link:hover .read-more {
  color: var(--accent2);
}

@media (max-width: 800px) {
  main {
    margin: 0 1rem;
    padding: 0 1rem;
  }

  .nav-content {
    margin: 0 0 0 1rem;
    padding: 0 0 0 1rem;
  }

  .archive-post {
    flex-direction: column;
    gap: 0.5rem;
  }

  .archive-post time {
    min-width: auto;
  }
}

.archive-post p.author {
  display: block;
  margin: 0 0 0.4rem 0;
  font-size: 0.9rem;
  color: var(--lime-light);
}

/* Update any other h3s that might not be links */
h3 {
  color: var(--lime-soft);
}

.post-link time,
.archive-post-link time {
  color: var(--lime-light);
}

.post-link p.author {
  display: block;
  margin: 0 0 0.4rem 0;
  font-size: 0.9rem;
  color: var(--lime-light);
}