/* --- BASE STYLES --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px; 
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300; /* Fixed: weight must be a number */
  font-style: normal;
  background-color: #e5e0d8;
  color: #333;
  margin: 0;
  line-height: 1.6;
}

/* --- HEADER --- */
.main-header {
  padding: 30px 60px;
  background-color: #e5e0d8; 
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.logo-box .site-logo {
  height: 60px; 
  width: auto;
  opacity: 0.9;
  display: block; 
}

.main-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li {
  margin: 0 25px;
}

.main-nav a {
  font-family: "Archivo", sans-serif;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.main-nav a:hover {
  color: #d68c5d;
}

.header-contact a {
  font-family: "Archivo", sans-serif;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

/* --- LAYOUT WRAPPER --- */
.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 60px 60px 60px;
}

.about-container {
  display: flex;
  gap: 60px; /* Adjust this to change the space between the two columns */
  align-items: flex-start;
}

.about-text-column, 
.about-photo-column {
  flex: 1; /* Both sides take up equal space */
}

.about-photo {
  width: 100%; /* Makes the photo fill its half of the rectangle */
  height: auto;
  margin-bottom: 20px; /* Space between photo and the paragraph below it */
  filter: grayscale(20%);
}

.about-text-column p,
.about-photo-column p {
  font-weight: 200;
  margin-bottom: 20px;
  line-height: 1.6;
}
.quote {
  font-family: "Geist Mono", monospace;
  font-size: 18px; 
  font-weight: 300;
  margin-bottom: 20px;
  line-height: 1.6;
}

.about-text-column h2 {
  font-family: "Archivo", sans-serif;
  font-size: 8vw; /* This makes the text 12% of the screen width */
  line-height: 0.9; /* Tighter line height looks better for huge text */
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 700;
  letter-spacing: -2px; /* Tighter letters for that 'stamped' look */
}

/* --- WORK SECTION --- */
section {
  margin-bottom: 150px;
}

.section-title {
  font-family: "Archivo", sans-serif;
  font-size: 8vw; /* This makes the text 12% of the screen width */
  line-height: 0.9; /* Tighter line height looks better for huge text */
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 700;
  letter-spacing: -2px; /* Tighter letters for that 'stamped' look */
}

.section-text {
  flex: 1; 
  max-width: 33%; 
  margin-bottom: 0;
  font-weight: 200;
}

.section-text h3 {
  flex: 1; 
  max-width: 100%; 
  margin-bottom: 0;
  font-weight: 300;
}


.work-container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}


/* --- BLOG SECTION (Brutalist Lines) --- */
.blog-container {
  margin-top: 40px;
}

.blog-entry {
  border-top: 1px solid #000; /* The line on top of every entry */
  max-width: 600px;
  padding: 60px 0 40px 0; /* Creates the editorial breathing room */
}

.blog-category {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #777;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.blog-entry h3 a {
  text-decoration: none;
  font-family: "Archivo", sans-serif;
  color: #333;
  font-size: 28px;
  font-weight: 500; /* Heavy weight like your reference */
  letter-spacing: 1px;
}

.blog-entry p {
  font-size: 15px;
  font-weight: 200;
  color: #555;
  margin-top: 15px;
}

.blog-entry small {
  display: block;
  margin-top: 10px;
  color: #888;
}

/* --- RESPONSIVE DESIGN --- */

/* 1. Tablet & Small Laptop (1024px and below) */
@media (max-width: 1024px) {
  .about-text-column h2,
  .section-title {
    font-size: 10vw; /* Scales titles down slightly */
  }

  .content-wrapper {
    padding: 40px; /* Reduces side breathing room slightly */
  }
}

/* 2. Mobile Phones (768px and below) */
@media (max-width: 768px) {
  /* Reset Header for Mobile */
  .main-header {
    padding: 20px;
  }

  .header-container {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .main-nav ul {
    justify-content: center;
  }

  .main-nav li {
    margin: 0 10px;
  }

  /* Stack About & Work Columns */
  .about-container, 
  .work-container {
    flex-direction: column; /* This is the key: vertical stacking */
    gap: 30px;
  }

  .section-text {
    max-width: 100%; /* No more 33% width on small screens */
  }

  /* Handle Massive Titles on Mobile */
  .about-text-column h2,
  .section-title {
    font-size: 14vw; /* Bigger percentage so it stays impactful on tiny screens */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 0 20px 10px 20px; 
    box-sizing: border-box;
  }

  /* Edge-to-Edge Blog Entries */
  .blog-entry {
    max-width: 100%;
    width: 100%;
    position: static;
    margin-left: 0; /* Removes the pull to the left edge */
    padding: 30px 0; /* Vertical padding only; let the wrapper handle sides */
    box-sizing: border-box;
    border-top: 1px solid #000;
    }

  body {
    overflow-x: hidden;
  }

  .content-wrapper {
    padding: 20px;
  }
}