/* 1. GLOBAL SETTINGS & FADE-IN */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #f2f4e8 !important; 
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  animation: fadeInPage 0.8s ease-in-out forwards;
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 2. HEADER & NAVIGATION */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent !important;
}

body:not(.home) .main-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; 
  background-color: #f2f4e8;
  z-index: -1; 
  pointer-events: none;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 54px !important; 
  position: relative;
  z-index: 1001;
}

.logo.v2 {
  color: #1a2421; 
  font-size: 2.3rem; 
  text-decoration: none;
  line-height: 1;
  text-transform: uppercase;
  display: inline-block;
  font-family: "Optima", "Optima Regular", "URW Classico", "Palatino", "Palatino Linotype", serif;
  font-weight: 300; 
  letter-spacing: -0.01em; 
  transform: scaleY(1.05) translateY(-5%);
  transform-origin: top;
}

.nav-links {
  display: flex;
  justify-content: flex-end; 
  gap: 56px; 
  list-style: none;
  margin: 18px 0 0 0; 
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.0rem; 
  letter-spacing: 0.02em; 
  text-transform: capitalize; 
  transition: all 0.2s ease;
  font-weight: 400;
  color: #8c9995; 
}

.nav-links a.active, 
.nav-links a[aria-current="page"],
.nav-links a:hover {
  color: #1a2421 !important; 
}

/* 3. ABOUT PAGE LAYOUT (Exact Restore from your File) */
.about-container {
  display: flex !important;
  width: 100% !important;
  min-height: 100vh;
  align-items: flex-start;
  padding: 0 !important;
}

.about-left, 
.about-content {
  flex: 0 0 40% !important;
  max-width: 40% !important;
  padding: 110px 54px 160px 54px !important; 
  box-sizing: border-box !important;
}

.about-intro p:first-child,
.about-section h2, 
.about-bio h2,
.contact-details h2 {
  font-size: 1.155rem !important; 
  line-height: 1.25 !important; 
  font-weight: 400 !important;
  color: #4a5451 !important; 
  margin: 0 0 18px 0 !important; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: block;
}

.about-portrait img,
.about-content img {
  width: 107% !important; 
  max-width: none !important;
  height: auto !important;
  margin: 8px 0 32px 0 !important; 
  display: block !important;
}

.about-intro p,
.about-bio p,
.about-section p,
.contact-details p {
  font-size: 0.9rem !important; 
  line-height: 1.4 !important; 
  font-weight: 400 !important; 
  color: #555555 !important; 
  letter-spacing: normal !important; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 22px !important;
  text-align: left !important;
}

.about-portrait + p,
.about-bio p:first-of-type {
  text-align: left !important;
  width: 107% !important; 
}

.about-section, 
.contact-details {
  max-width: 45% !important; 
  text-align: left !important;
}

.about-container::after {
  content: "" !important;
  flex: 0 0 60% !important;
  height: 100vh;
}

/* 4. WORKS PAGE LAYOUT (Refined 38% version) */
.projects-main-container {
  padding: 140px 0 160px 0;
  width: 100%;
  box-sizing: border-box;
}

.project-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 120px;
  align-items: flex-start;
  width: 100%;
  /* This 54px matches your .header-inner padding exactly */
  padding: 0 54px; 
  box-sizing: border-box;
}

.project-meta {
  flex: 0 0 50%; 
}

.project-name {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; 
  font-weight: normal; 
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px 0;
  color: #2c3e39; 
}

.project-details {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #2c3e39;
  font-style: italic;
}

.project-visual {
  flex: 0 0 38%; 
  display: flex;
  /* This ensures the image stays flush against the right padding boundary */
  justify-content: flex-end; 
}

.project-visual img {
  width: 100% !important;
  height: auto;
  display: block;
}

/* 5. LIGHTBOX SYSTEM */
#gallery-lightbox {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #f2f4e8; 
  z-index: 9999;
  display: none; 
  justify-content: center;
  align-items: center;
}

#gallery-lightbox.active { display: flex; }

#lb-img {
  max-width: 85%;
  max-height: 85vh;
  object-fit: contain;
}

.lb-nav, .lb-close {
  position: absolute;
  font-size: 2rem;
  color: #1a2421;
  cursor: pointer;
  padding: 20px;
  user-select: none;
}

.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-close { top: 20px; right: 40px; }

/* 6. SHARED ELEMENTS & RESPONSIVE */
hr {
  border: 0;
  border-top: 1.5px solid #1a2421;
  width: 42px !important;
  margin: 40px 0 18px 0 !important;
}

.contact-stack {
  margin-top: -10px !important;
  line-height: 1.4 !important;
}

.contact-stack a {
  text-decoration: none;
  color: #555555 !important;
  display: inline-block;
}

@media (max-width: 768px) {
  .about-left, .about-content, .projects-main-container { 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
    padding: 100px 24px 60px 24px !important;
  }
  .project-row { flex-direction: column-reverse; }
  .about-container::after { display: none; }
}


/* ISOLATED WORKS PAGE STYLES */
.projects .project-name {
    font-size: 1.2rem;
    margin-bottom: 0.5em;
    text-transform: none;
    font-weight: normal;
}

.projects .detail-line {
    font-size: 0.9rem;
    line-height: 1.4;
    display: inline-block;
}

.projects .project-visual {
    flex: 0 0 65% !important;
}

/* Refined Works Alignment */
.projects .project-visual {
    flex: 0 0 52% !important;
    justify-content: flex-end;
}

.projects .project-visual img {
    max-width: 100%;
    height: auto;
}

/* ISOLATED REFINEMENT: Works Image Alignment */
.projects .project-visual {
    flex: 0 0 52% !important;
    display: flex;
    justify-content: flex-end;
}

.projects .project-visual img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ISOLATED REFINEMENT: 70% Width & Right Align */
.projects .project-visual {
    flex: 0 0 36% !important;
    display: flex;
    justify-content: flex-end;
}

/* ISOLATED REFINEMENT: 5% Width Increase */
.projects .project-visual {
    flex: 0 0 38% !important;
}

/* ISOLATED REFINEMENT: Match About Page Gap */
.projects .projects-main-container {
    padding-top: 110px !important;
}

/* ISOLATED: Project Detail Two-Column Layout */
.project-detail-container {
    display: flex;
    justify-content: space-between;
    padding: 110px 54px 100px 54px; /* Aligning with header padding */
    gap: 60px;
}

.project-info {
    flex: 0 0 30%; /* Left column width */
    position: sticky;
    top: 110px;
    height: fit-content;
}

.project-content {
    flex: 0 0 65%; /* Right column width */
}

.project-gallery img {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}

.project-text {
    margin-top: 60px;
    max-width: 800px;
}

/* REFINED: Narrower Image Column & Text Styling */
.project-detail-container {
    display: flex;
    justify-content: flex-start; /* Aligning content to the left */
    padding: 110px 54px;
    gap: 10%; /* Creating a consistent visual gap */
}

.project-info {
    flex: 0 0 30%;
    /* Re-applying lost typography styles */
    font-family: inherit; 
    line-height: 1.6;
}

.project-info h1 {
    font-size: 2.3rem;
    margin-bottom: 20px;
    font-weight: normal;
}

.project-content {
    flex: 0 0 39%; /* 60% of the previous 65% width */
}

.project-text p {
    margin-bottom: 1.5em;
    line-height: 1.8;
    /* Ensure this matches your About page font size */
}

/* FINAL REFINEMENT: Match Site Typography */
.project-info h1 {
    font-size: 2.3rem;
    font-weight: 400;
    margin: 0 0 40px 0;
    letter-spacing: -0.02em;
}

.project-meta-data p {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 5px 0;
    color: #1a2421; /* Matching your logo color */
}

/* Ensuring the text on the right also matches */
.project-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #1a2421;
}

/* REFINED PROJECT LAYOUT */
.project-detail-container {
    display: flex;
    justify-content: flex-start;
    padding: 110px 54px;
    gap: 80px;
}

.project-info {
    flex: 0 0 30%;
    position: sticky;
    top: 110px;
    height: fit-content;
}

.project-info h1 {
    font-size: 2.3rem;
    font-weight: 400;
    margin-bottom: 30px;
    color: #1a2421;
}

.project-meta-data p {
    font-size: 1rem;
    margin: 0 0 8px 0;
    color: #1a2421;
    line-height: 1.4;
}

.project-content {
    flex: 0 0 40%; /* Narrower column as requested */
}

.project-gallery img {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    display: block;
}

.project-text {
    margin-top: 60px;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #1a2421;
}

/* ISOLATED: Project Page Refinement */
.project-detail-container .project-info .project-name {
    font-size: 2.3rem; /* Matches .logo.v2 and Works index */
    font-weight: normal;
    margin: 0 0 20px 0;
}

.project-detail-container .project-details .detail-line {
    font-size: 1rem;
    line-height: 1.4;
    display: inline-block;
}

/* Right Column Spacing */
.project-description {
    margin: 3em 0; /* Roughly "two text lines" of gap top and bottom */
    max-width: 100%;
}

.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Starting as a 2-column grid */
    gap: 20px;
}

.project-hero img {
    width: 100%;
    height: auto;
}

/* FINAL ALIGNMENT: Project Page vs Works Index */
.project-detail-container {
    display: flex;
    justify-content: space-between;
    padding: 110px 54px; /* Matches standard side padding */
}

/* Inherit Works Index Styles for the Left Side */
.project-detail-container .project-name {
    font-size: 2.3rem; 
    font-weight: normal;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.project-detail-container .detail-line {
    font-size: 1rem;
    line-height: 1.4;
}

/* Right Column: 60% of previous width, Right-Aligned */
.project-content {
    flex: 0 0 38%; /* 60% of the previous ~65% */
    margin-left: auto; /* Pushes content to the right edge */
}

.project-hero img, 
.project-gallery-grid img {
    width: 100%;
    height: auto;
    display: block;
}

.project-description {
    margin: 40px 0;
    line-height: 1.6;
}

.project-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* REFINED ALIGNMENT: Remove Top Gap & Fix Image Width */
.project-detail-container {
    display: flex;
    justify-content: space-between;
    padding: 0 54px 100px 54px; /* Removed top 110px padding */
}

.project-info {
    flex: 0 0 30%;
    /* No change to position sticky or top, as it works relative to the viewport */
    padding-top: 110px; /* Moves text down so it's not hidden behind the logo */
}

.project-content {
    flex: 0 0 45%; /* Increased from 38% to hit the 85% -> 100% target */
    margin-left: auto;
}

.project-hero {
    /* No top padding here ensures image starts at the very top of the container */
    width: 100%;
}

/* REFINED PROJECT LAYOUT: Matching Works Page Spacing */
.project-detail-container {
    display: flex;
    justify-content: space-between;
    /* Exactly matching the 140px top padding of .projects-main-container */
    padding: 140px 54px 160px 54px; 
}

.project-info {
    flex: 0 0 30%;
    /* Remove the extra padding-top we added previously */
    padding-top: 0; 
}

.project-content {
    /* Fixed width to match visual target and nav alignment */
    flex: 0 0 53%; 
    margin-left: auto;
}

/* Restoring description text styling to match site standard */
.project-description {
    margin: 40px 0;
}

.project-description p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #1a2421;
    margin-bottom: 1.5em;
    font-weight: normal;
    font-style: normal;
}

/* FINAL REFINEMENT: Match Works Page Spacing and Typography */
.project-detail-container {
    display: flex;
    justify-content: space-between;
    /* Exactly matching the 140px top padding from the Works page */
    padding: 140px 54px 100px 54px; 
}

.project-info {
    flex: 0 0 30%;
}

.project-content {
    /* Set to 53% to align with the right-side navigation */
    flex: 0 0 53%; 
    margin-left: auto;
}

/* Ensure description text matches the site's body text style */
.project-description p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #1a2421;
    margin-bottom: 1.5em;
}

/* FINAL ALIGNMENT FIX */
main.project-detail-container {
    display: flex !important;
    justify-content: space-between !important;
    /* This 140px matches the top gap on the Works page */
    padding: 140px 54px 100px 54px !important; 
}

.project-info .project-name {
    font-size: 2.3rem !important;
    font-weight: normal !important;
    margin: 0 0 20px 0 !important;
}

.project-content {
    flex: 0 0 53% !important; /* Adjusted width for nav alignment */
    margin-left: auto !important;
}

.project-description p {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1.5em !important;
}

/* REFINED GAP: Matching Works Page Spacing */
.project-detail-container {
    display: flex;
    justify-content: space-between;
    /* Exactly matching the 140px top padding of the Works page */
    padding: 140px 54px 100px 54px; 
}

/* REFINED GAP: Matching Works Page Spacing */
.project-detail-container {
    padding-top: 140px !important;
}

/* IMAGE WIDTH ADJUSTMENT */
.project-content {
    flex: 0 0 63% !important; /* Increased from 53% to 63% */
}

/* INCREASE IMAGE WIDTH BY 10% */
.project-content {
    flex: 0 0 63% !important; /* Adjusted from 53% */
}

.project-info {
    flex: 0 0 37% !important; /* Adjusted to maintain the 100% total */
}

/* Fixes for Works Page Layout */
.projects-main-container {
    margin-top: 80px; /* Adjust this number to match the logo height */
}

.project-row .project-meta {
    flex: 0 0 60% !important;
}

.project-row .project-visual {
    flex: 0 0 40% !important;
    display: flex;
    justify-content: flex-end;
}

.project-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* Revised Fixes for Works Page Layout */
.projects-main-container {
    margin-top: -40px !important; /* Pulls the content UP */
    padding-top: 0 !important;
}

.project-row {
    margin-top: 0 !important;
}

/* Precision adjustments for Works Page */
.projects-main-container {
    /* Pulling it up by roughly one line height (~1.5rem) */
    margin-top: -65px !important; 
}

.project-row .project-visual {
    /* Reducing 40% by 5% of itself (40 * 0.95 = 38) */
    flex: 0 0 38% !important; 
}

/* Refined spacing and typography match */
.projects-main-container {
    margin-top: -52px !important; /* Halfway between the last two attempts */
}

.projects .project-name {
    font-size: 1.1rem !important; /* Matches the About page intro scale */
    line-height: 1.4;
}

/* Final precision adjustments for Works Page */
.projects-main-container {
    margin-top: -52px !important; 
}

.project-row .project-visual {
    flex: 0 0 39% !important; 
}

.projects .project-name {
    font-size: 1.1rem !important;
    line-height: 1.4;
    text-transform: none !important;
    font-weight: normal !important;
}

/* Ultra-specific overrides to force the layout */
body.projects main.projects-main-container {
    margin-top: -45px !important; 
}

body.projects .project-row .project-meta .project-name {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    font-weight: normal !important;
    margin-bottom: 0.2em !important;
}

body.projects .project-row .project-visual {
    flex: 0 0 39% !important;
}

/* Forced Overrides for Works Page Alignment and Scale */
body.projects main.projects-main-container {
    margin-top: -45px !important;
}

body.projects .project-meta .project-name {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

/* FINAL ATTEMPT: FORCED WORKS PAGE STYLES */
body.projects .project-name {
    font-size: 1.45rem !important; /* Significant increase to make it obvious */
    line-height: 1.1 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    display: block !important;
    visibility: visible !important;
}

body.projects .projects-main-container {
    margin-top: -42px !important; /* Adjusted gap */
}

/* Clean styles now that inline blocks are removed */
body.projects .project-name {
    font-size: 1.4rem !important; 
    line-height: 1.2 !important;
    text-transform: none !important;
    font-weight: 400 !important;
    margin-bottom: 5px !important;
}

body.projects .projects-main-container {
    margin-top: -38px !important;
}

/* Precision adjustments for font scale and vertical gap */
body.projects .project-name {
    font-size: 1.15rem !important; 
    line-height: 1.2 !important;
}

body.projects .projects-main-container {
    margin-top: -48px !important;
}

/* --- Step 2: Project Detail Layout & Typography --- */
.project-detail-wrapper {
    display: flex;
    gap: 60px;
    padding: 120px 54px;
    align-items: flex-start;
}

.project-detail-wrapper .project-info {
    flex: 0 0 300px; /* Fixed width for the metadata sidebar */
}

.project-detail-wrapper .project-content {
    flex: 1;
}

.project-detail-wrapper .project-hero img,
.project-detail-wrapper .gallery-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 40px;
}

/* --- Step 2.1: Refine Positioning --- */
.project-detail-wrapper {
    padding-top: 80px !important;
}

.project-detail-wrapper .project-description {
    max-width: 600px;
    margin-top: 40px;
    line-height: 1.6;
}

.project-detail-wrapper .project-info {
    position: sticky;
    top: 80px;
}

/* --- Step 2.2: Match Works Page Proportions --- */
.project-detail-wrapper {
    padding: 30px 54px !important; /* Matches header-inner padding */
    display: flex;
    gap: 40px; /* Matches .project-row gap */
    align-items: flex-start;
}

.project-detail-wrapper .project-info {
    flex: 0 0 calc(100% - 39% - 40px); /* Calculating remainder to leave 39% for images */
}

.project-detail-wrapper .project-content {
    flex: 0 0 39%; /* Matching the .project-visual width from Works page */
}

.project-detail-wrapper .project-meta {
    margin-top: -12px !important; /* Matching Works page alignment logic */
}

/* --- Step 2.3: Forced Layout & Logo Alignment --- */
.project-detail-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 30px 54px !important;
    gap: 40px !important;
    margin-top: 0 !important;
}

.project-detail-wrapper .project-info {
    flex: 1 !important; /* Takes remaining space */
    order: 1 !important;
}

.project-detail-wrapper .project-content {
    flex: 0 0 39% !important; /* Forced 39% width for images */
    order: 2 !important;
}

.project-detail-wrapper .project-meta {
    margin-top: -12px !important; /* Precise logo alignment */
}

/* --- Step 2.4: Precision Alignment & Gutter --- */
.project-detail-wrapper {
    display: flex !important;
    padding: 0 54px !important; /* Matches Header horizontal padding */
    gap: 40px !important;
    margin-top: 80px !important; /* Creates space below the fixed header */
}

.project-detail-wrapper .project-info {
    flex: 1 !important;
    /* This padding-top is a guestimate to hit the logo baseline */
    padding-top: 4px !important; 
}

.project-detail-wrapper .project-content {
    flex: 0 0 39% !important;
}

.project-detail-wrapper .project-meta {
    /* Ensuring the -12px matches the logic used in Works */
    margin-top: -12px !important;
}

/* --- Step 2.5: Pixel-Perfect Indent & Vertical Match --- */
.project-detail-wrapper {
    display: flex !important;
    padding: 0 54px !important; /* Standard site gutter */
    gap: 40px !important;
    margin-top: -12px !important; /* Pulls the whole layout up to match Works */
}

.project-detail-wrapper .project-info {
    flex: 1 !important;
    /* Ensuring the internal meta doesn't have extra padding */
    padding: 0 !important;
}

.project-detail-wrapper .project-content {
    flex: 0 0 39% !important;
}

/* --- Step 2.6: Fix Overlap & Match Baseline --- */
.project-detail-wrapper {
    display: flex !important;
    padding: 80px 54px 0 54px !important; /* 80px top padding to clear header height */
    gap: 40px !important;
    margin-top: 0 !important; /* Resetting the negative margin that caused overlap */
}

.project-detail-wrapper .project-info {
    flex: 1 !important;
}

.project-detail-wrapper .project-content {
    flex: 0 0 39% !important;
}

/* --- Step 2.7: Vertical Fine-tune --- */
.project-detail-wrapper {
    padding-top: 30px !important;
}

/* --- Step 2.8: Final Vertical Sync --- */
.project-detail-wrapper {
    padding-top: 0 !important;
    margin-top: -42px !important;
}

/* --- Step 2.9: Direct Container Offset Match --- */
.project-detail-wrapper {
    padding-top: 0 !important;
    margin-top: -42px !important;
}

/* --- Step 2.9: Reset Inherited Padding & Apply Offset --- */
.project-detail-wrapper {
    padding-top: 0 !important;
    margin-top: -42px !important;
}

/* --- Step 2.10: Vertical Shift Down --- */
.project-detail-wrapper {
    margin-top: 0 !important;
    padding-top: 120px !important;
}

/* --- Step 2.11: 8px Micro-adjustment Upward --- */
.project-detail-wrapper {
    padding-top: 112px !important;
}

/* --- Step 2.12: Micro-adjustment Downward --- */
.project-detail-wrapper {
    padding-top: 125px !important;
}

/* --- Step 3: Image Width & Description Styling --- */
.project-detail-wrapper .project-content {
    flex: 0 0 49% !important; /* Increased from 39% */
}

.project-detail-wrapper .project-description {
    font-size: 0.9rem !important; /* Matches .nav-links a size */
    line-height: 1.5 !important;
    margin-top: 30px !important;
    color: #1a2421 !important;
}

/* --- Step 3.1: Final Width & Typography Match --- */
.project-detail-wrapper .project-content {
    flex: 0 0 41% !important; /* Reduced 8% from the previous 49% */
}

.project-detail-wrapper .project-description {
    font-size: 1.15rem !important; /* Matches original site scale */
    line-height: 1.6 !important;
    margin-top: 40px !important;
    color: #1a2421 !important;
    font-weight: 300;
}

.project-detail-wrapper .project-description p {
    margin-bottom: 1.5em; /* Spacing between paragraphs */
}

/* --- Step 3.2: 44% Width & Typography Sync --- */
.project-detail-wrapper .project-content {
    flex: 0 0 44% !important; /* Increased 3% from 41% */
    display: flex;
    flex-direction: column;
}

.project-detail-wrapper .project-description {
    font-size: 1rem !important; /* One size smaller than 1.15rem */
    line-height: 1.6 !important;
    margin-top: 40px !important;
    padding: 0 !important; /* Ensure alignment with image edge */
    text-align: left;
}

.project-detail-wrapper .project-description p {
    margin-bottom: 1.5em;
    margin-left: 0 !important;
}

/* --- Step 3.4: Image Width & Typography Fix --- */
.project-detail-wrapper .project-content {
    flex: 0 0 45.3% !important; /* The 3% increase from 44% */
}

.project-detail-wrapper .project-description {
    font-size: 1rem !important; /* Smaller than the 1.15rem meta */
    line-height: 1.6 !important;
    margin-top: 30px !important;
    display: block !important; /* Ensures it doesn't disappear */
}

.project-detail-wrapper .project-description p {
    margin-bottom: 1.5em !important;
    margin-left: 0 !important;
}

/* --- Step 3.5: 50% Width & Font Family Sync --- */
.project-detail-wrapper .project-content {
    flex: 0 0 50% !important; /* 10% increase from previous 45% */
}

.project-detail-wrapper .project-description {
    font-family: inherit !important; /* Inherits the site-wide serif/sans used in meta */
    width: 100% !important;
    max-width: none !important;
    text-align: justify; /* Optional: adjust if original site is left-aligned */
}

.project-detail-wrapper .project-description p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- Step 3.6: 46% Width & Sans-Serif Font Sync --- */
.project-detail-wrapper .project-content {
    flex: 0 0 46% !important; /* Reduces width by ~8% from previous 50% */
}

.project-detail-wrapper .project-description,
.project-detail-wrapper .project-description p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #1a2421 !important;
    text-align: left !important;
    width: 100% !important;
}

/* --- Step 3.7: Precise Width & Inspector Typography --- */
.project-detail-wrapper .project-content {
    flex: 0 0 44.2% !important; /* 96% of the previous 46% */
}

.project-detail-wrapper .project-description,
.project-detail-wrapper .project-description p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important; /* From Inspector: image_f95589.png */
    letter-spacing: 0.02em !important; /* From Inspector: image_f95589.png */
    line-height: 1.8 !important; /* Adjusted for readability at 14px */
    color: #1a2421 !important;
    text-align: left !important;
    width: 100% !important;
}

/* --- Step 3.8: 15px Font & Half Gap --- */
.project-detail-wrapper .project-description {
    margin-top: 15px !important; /* Half of the previous 30px gap */
}

.project-detail-wrapper .project-description p {
    font-size: 15px !important; /* +1pt from 14px */
}

/* --- Step 3.9: 17px Font & 9px Gap --- */
.project-detail-wrapper .project-description {
    margin-top: 9px !important; /* 40% reduction from 15px */
}

.project-detail-wrapper .project-description p {
    font-size: 17px !important; /* +2pt from 15px */
}

/* --- Step 3.10: 16px Font & 5px Gap --- */
.project-detail-wrapper .project-description {
    margin-top: 5px !important; /* Further reduction to 5px */
}

.project-detail-wrapper .project-description p {
    font-size: 16px !important; /* -1pt from 17px */
}

/* --- Step 3.11: Tighter Line Height & Forced Gap --- */
.project-detail-wrapper .project-content img {
    margin-bottom: 0 !important;
}

.project-detail-wrapper .project-description {
    margin-top: 5px !important;
}

.project-detail-wrapper .project-description p {
    line-height: 1.3 !important; /* Reduced from 1.6 */
    margin-bottom: 1.2em !important; /* Space between paragraphs */
}

/* --- Step 3.12: Double Gap & Bottom Spacing --- */
.project-detail-wrapper .project-description {
    margin-top: 10px !important; /* Doubled from 5px */
    margin-bottom: 10px !important; /* Matches top gap for lightbox images */
}

/* --- Step 3.13: Force Top Gap & 2-Column Grid --- */
.project-detail-wrapper .project-description {
    margin-top: 0 !important;
    padding-top: 10px !important; /* Forced padding since margin failed */
    margin-bottom: 10px !important;
}

/* Gallery Grid Styling */
.project-images {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
}

.project-images img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* --- Step 3.14: Force Gallery Grid & Top Gap --- */
/* Target the index image specifically to force space below it */
.project-content > img:first-of-type {
    margin-bottom: 20px !important; /* Forces gap between index image and text */
}

/* Find the container for the rest of the images */
.project-content .gallery, 
.project-content .project-images-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Backup: If they are loose images, wrap them or target them */
.project-content img:not(:first-of-type) {
    width: 100% !important;
}

/* --- Step 3.16: 9px Gaps & Precise 2-Column Alignment --- */

/* 1. Set gaps to 9px (10% less than 10px) */
.project-detail-wrapper .project-description {
    padding-top: 9px !important;
    margin-bottom: 9px !important;
}

/* 2. Target the gallery container specifically without touching the index image */
/* This assumes images after the description are the gallery */
.project-description ~ div, 
.project-description ~ p:has(img) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Ensure images fill their 50% slots to hit the LHS/RHS edges */
.project-description ~ div img,
.project-description ~ p img {
    width: 100% !important;
    display: block !important;
}

/* --- Step 3.17: Sync Gaps & Flush 2-Column Grid --- */

/* 1. Sync Top Gap to match the 9px Bottom Gap */
.project-content img:first-of-type {
    margin-bottom: 9px !important;
}

.project-description {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 9px !important;
}

/* 2. Fix Grid Alignment and Gutter */
.project-description ~ div, 
.project-description ~ p:has(img) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 9px !important; /* Smaller gap between images */
    row-gap: 9px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Force images to be flush with container edges */
.project-description ~ div img,
.project-description ~ p img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

/* --- Step 3.18: Flush 2-Column Grid Fix --- */

/* 1. Target the container for the images below the text */
.project-content div:has(img:not(:first-child)), 
.project-content p:has(img:not(:first-child)) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 9px !important;
    row-gap: 9px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Force images to be flush with the column edges */
.project-content img:not(:first-of-type) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important; /* Removes the "massive" vertical gap */
    padding: 0 !important;
}

/* 3. Sync the top gap to match the bottom gap (9px) */
.project-content img:first-of-type {
    margin-bottom: 9px !important;
}

/* --- Step 3.21: Forced Edge-to-Edge Grid --- */

/* 1. Ensure the container holding the two columns has zero internal padding */
.project-content .lightbox-gallery,
.project-content div:has(a > img) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important; /* Must match index image width */
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
}

/* 2. Remove any individual margins on the gallery images */
.project-content .lightbox-gallery img,
.project-content div:has(a > img) img {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 3. Sync the top gap back to the 'close enough' state */
.project-content img:first-of-type {
    margin-bottom: 12px !important;
}

/* --- Step 3.22: Force Gallery Flush to Edges --- */

/* Target the container for gallery images */
.project-content .lightbox-gallery,
.project-content div:has(a > img),
.project-content p:has(img:not(:first-of-type)) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    
    /* Pull the container out to match the index image width */
    width: auto !important;
    margin-left: -20px !important; /* Adjusting for parent padding */
    margin-right: -20px !important; /* Adjusting for parent padding */
    padding: 0 !important;
}

/* Ensure images fill the expanded container */
.project-content .lightbox-gallery img,
.project-content div:has(a > img) img,
.project-content p img:not(:first-of-type) {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

/* --- Step 3.23: Force Gallery Flush to Column Edges --- */

/* 1. Target the specific container for gallery images below text */
.project-content .lightbox-gallery,
.project-content div:has(a > img),
.project-content p:has(img:not(:first-of-type)) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    
    /* Force container to 100% of the parent column width */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

/* 2. Remove any layout-breaking constraints from parent links or spans */
.project-content a:has(img) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 3. Ensure images fill the grid cells exactly */
.project-content img:not(:first-of-type) {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

/* --- Step 3.30: Forced Edge Alignment --- */

/* 1. Reset the container to ensure it doesn't clip or pad */
.project-content .lightbox-gallery, 
.project-content div:has(img:not(:first-child)) {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Force the links/images into a 2-column grid that hits the edges */
.project-content .lightbox-gallery a,
.project-content div:has(img:not(:first-child)) a {
    display: inline-block !important;
    width: calc(50% - 5px) !important; /* 10px total gutter */
    margin: 0 !important;
    padding: 0 !important;
    float: left !important;
}

/* 3. Pull the left image flush to the LHS and right to the RHS */
.project-content .lightbox-gallery a:nth-child(odd) {
    margin-right: 5px !important;
}
.project-content .lightbox-gallery a:nth-child(even) {
    margin-left: 5px !important;
    float: right !important;
}

/* 4. Restore the Top Gap that was lost in the last step */
.project-content img:first-of-type {
    margin-bottom: 12px !important;
}

/* --- Step 3.31: Force Gallery Alignment --- */

/* Expand the gallery container to counteract parent padding */
.project-content .lightbox-gallery, 
.project-content .project-gallery {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: auto !important;
    margin-left: -20px !important; /* Pull to left edge */
    margin-right: -20px !important; /* Pull to right edge */
    padding: 0 !important;
}

/* Ensure images within the links fill the grid space */
.project-content .lightbox-gallery a img,
.project-content .project-gallery a img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Re-assert the locked text gaps */
.project-content img:first-of-type {
    margin-bottom: 12px !important;
}
.project-description {
    margin-bottom: 12px !important;
}