/* ===========================================================================
   BASE STYLES & VARIABLES
=========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --background-color: #f8f5f1;
  --text-color: #000000;
  --link-color: #ffffff;
  --footer-text-color: #ffffff;
  --border-color: #000000;
  --details-text-color: rgba(0, 0, 0, 0.4);
  --blockquote-color: #555;
  --code-bg: #eee;
  --pre-bg: #2d2d2d;
  --pre-color: #ccc;

  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Inter Tight', sans-serif;

  --header-height: 58px;
  --content-padding-x: 20px;
  --content-padding-top: 60px;
  --content-bottom-padding: 100px;
  --archive-padding-top: 100px;
  --project-padding-top: 60px;
  --project-bottom-padding: 100px;
  --page-padding-top: 60px;
  --page-bottom-padding: 50px;
  --page-section-gap: 50px;
  --page-list-item-gap: 2px;
  --not-found-padding-top: 50px;
  --not-found-padding-bottom: 50px;
  --not-found-min-height: 60vh;
  --footer-padding-top: 192px;
  --footer-padding-bottom: 20px;
  --footer-column-gap: 7px;
  --grid-gap: 20px;
  --nav-link-gap: 14px;
  --card-title-gap: 7px;
  --column-gap: 20px;
  --row-gap: 40px;

  --archive-row-padding: 15px;
  --archive-image-width: 113px;
  --archive-image-offset: 10px;
  --project-detail-gap: 5px;
  --project-image-gap: 10px;
  --sticky-top-offset: 80px;
  --mobile-nav-padding-top: 40px;
}

html, body {
  font-family: var(--font-primary);
  font-size: 18px;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  padding-top: var(--header-height);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.page-404 {}
body.mobile-menu-open { overflow: hidden; }

main { flex-grow: 1; width: 100%; }

/* ===========================================================================
   GENERIC ELEMENT STYLES
=========================================================================== */
a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}
a:hover { opacity: 0.7; }
a[aria-current='page'],
a[aria-current='page']:hover { opacity: 0.6; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit;
  line-height: 1.3;
}
p { margin-bottom: 0; }

/* ===========================================================================
   PAGE LAYOUT CONTAINERS
=========================================================================== */
.gallery,
.commercial-gallery,
.archive-list-container,
.project-page-container,
.editorial-page-container,
.page-page-container,
.not-found-container {
  padding-left: var(--content-padding-x);
  padding-right: var(--content-padding-x);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.gallery                    { padding-top: var(--content-padding-top); padding-bottom: var(--content-bottom-padding); }
.commercial-gallery         { padding-top: var(--content-padding-top); padding-bottom: var(--content-bottom-padding); }
.archive-list-container     { padding-top: var(--archive-padding-top); padding-bottom: var(--content-bottom-padding); }
.project-page-container     { padding-top: var(--project-padding-top); padding-bottom: var(--project-bottom-padding); }
.page-page-container        { padding-top: var(--page-padding-top); padding-bottom: var(--page-bottom-padding); }
.not-found-container {
  padding-top: var(--content-padding-top);
  padding-bottom: var(--content-bottom-padding);
  min-height: var(--not-found-min-height);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ===========================================================================
   HEADER / NAVIGATION
=========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; width: 100%; height: var(--header-height);
  mix-blend-mode: difference;
  z-index: 100;
  color: var(--link-color);
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.3px;
  background: transparent;
  transition: background-color 0.3s ease;
}
.header-content {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding: 0 var(--content-padding-x);
  gap: var(--grid-gap);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.header-logo {
  grid-column: 1 / span 3;
  justify-self: start;
  font-weight: 500;
}
.header-logo:hover { opacity: 0.7; }

.main-nav { display: flex; align-items: center; gap: var(--nav-link-gap); }
.nav-group-1 { grid-column: 4 / span 6; justify-self: start; }
.nav-group-2 { grid-column: 10 / span 3; justify-self: start; }
.desktop-nav a { padding: 5px 0; }
.desktop-nav a:hover { opacity: 0.7; text-decoration: none; }

/* --- Mobile Nav & Toggle --- */
.mobile-menu-button {
  display: none;
  grid-column: 11 / span 2;
  justify-self: end;
  background: none;
  border: none;
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  padding: 5px;
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background-color: var(--background-color);
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  z-index: 90;
  gap: 14px;
  padding: calc(var(--header-height) + var(--mobile-nav-padding-top)) var(--content-padding-x) 40px;
  overflow-y: auto;
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.3px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.mobile-nav.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav a { color: var(--text-color); }

/* ===========================================================================
   CARDS AND GALLERIES
=========================================================================== */
.card { overflow: hidden; position: relative; }
.card a { display: block; position: relative; }
.card a:hover { opacity: 1; }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-out; }
.card a:hover img { transform: scale(1.03); }
.card-title {
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: var(--card-title-gap);
  color: var(--text-color);
}

.gallery {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
}
.gallery .card-dilettantes { grid-column: 1 / span 3; align-self: start; margin-top: 210px; }
.gallery .card-parsing     { grid-column: 6 / span 2; align-self: start; margin-top: 110px; }
.gallery .card-alchemical  { grid-column: 9 / span 3; align-self: start; }
.gallery .card-relevance   { grid-column: 9 / span 2; align-self: start; margin-top: calc(var(--grid-gap) * 4); }
.gallery .card-formation   { grid-column: 4 / span 3; align-self: start; margin-top: calc(var(--grid-gap) * 2); }
.gallery .card-cosmos      { grid-column: 10 / span 2; align-self: start; margin-top: 330px; }
.gallery .card-dreaming    { grid-column: 1 / span 4; align-self: start; margin-top: calc(var(--grid-gap) * 6); }
.gallery .card-praxis      { grid-column: 9 / span 4; align-self: start; margin-top: 191px; }
.gallery .card-properties  { grid-column: 6 / span 2; align-self: start; margin-top: calc(var(--grid-gap) * 4); }
.gallery .card-retrospect  { grid-column: 1 / span 2; align-self: start; margin-top: calc(var(--grid-gap) * 2); }

.commercial-gallery { display: flex; flex-direction: column; gap: var(--row-gap); }
.gallery-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--column-gap);
  width: 100%;
}
.gallery-column { display: flex; flex-direction: column; gap: var(--row-gap); }
.commercial-gallery .card { margin-top: 0 !important; }

/* ===========================================================================
   ARCHIVE LIST
=========================================================================== */
.archive-list { display: flex; flex-direction: column; }
.archive-list-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  padding: var(--archive-row-padding) 0;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  align-items: center;
  color: var(--text-color);
  text-decoration: none;
  overflow: visible;
}
.archive-list-item:hover {
  opacity: 1;
  background-color: rgba(0,0,0,0.03);
  z-index: 10;
}
.archive-list-item div {
  font-family: var(--font-secondary);
  font-size: 18px; font-weight: 500; letter-spacing: 0.3px; line-height: 1;
}
.item-title    { grid-column: 1 / span 3; justify-self: start; }
.item-category { grid-column: 4 / span 6; justify-self: start; }
.item-year     { grid-column: 10 / span 3; justify-self: start; }
.item-hover-image {
  position: absolute;
  right: var(--archive-image-offset); top: var(--archive-image-offset);
  width: var(--archive-image-width);
  height: calc(100% + 107px - (2 * var(--archive-image-offset)));
  object-fit: cover; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
  z-index: -1;
}
.archive-list-item:hover .item-hover-image { opacity: 1; }

/* ===========================================================================
   PROJECT PAGE
=========================================================================== */
.project-page-container { max-width: 100%; }
.project-header-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  padding-bottom: 200px;
  position: relative;
  width: 100%;
}
.project-details {
  grid-column: 1 / span 3;
  position: sticky; top: var(--sticky-top-offset);
  align-self: start;
  display: flex; flex-direction: column; gap: var(--project-detail-gap);
  font-family: var(--font-secondary);
  font-weight: 500; letter-spacing: 0.3px;
}
.project-details h1 { font-size: 18px; line-height: 1; color: var(--text-color); margin-bottom: 5px; }
.project-details p  { font-size: 18px; line-height: 1; color: var(--details-text-color); }

.project-main-image    { grid-column: 4 / span 3; align-self: start; }
.project-main-image img { aspect-ratio: .70625 / 1; object-fit: cover; width: 100%; height: auto; }

.project-image-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap); padding-bottom: 100px; width: 100%;
}
.project-image-column { grid-column: 4 / span 6; display: flex; flex-direction: column; gap: var(--project-image-gap); }
.project-image-item img { width: 100%; height: auto; display: block; }

.project-text-block   { padding: var(--row-gap) 0; }
.project-text-block h2 { font-family: var(--font-primary); font-weight: 700; font-size: 24px; margin-bottom: 15px; }
.project-text-block p  { line-height: 1.6; }

.next-project-section {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap); padding: 0; position: relative; width: 100%;
}
.next-project-details {
  grid-column: 1 / span 3;
  position: sticky; top: var(--sticky-top-offset);
  align-self: start; display: flex; flex-direction: column; gap: var(--project-detail-gap);
  font-family: var(--font-secondary);
  font-weight: 500; letter-spacing: 0.3px;
  text-decoration: none; color: var(--text-color);
}
.next-project-details p { font-size: 18px; line-height: 1; }
.next-project-details .next-project-client,
.next-project-details .next-project-year { color: var(--details-text-color); }
.next-project-details:hover { opacity: 0.7; }
.next-project-image { grid-column: 4 / span 3; align-self: start; }
.next-project-image img { aspect-ratio: .70625 / 1; object-fit: cover; width: 100%; height: auto; }

/* ===========================================================================
   PAGE PAGE
=========================================================================== */
.page-page-container { display: flex; flex-direction: column; gap: var(--page-section-gap); max-width: 100%; }
.page-grid-row {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap); width: 100%; align-items: start;
}
.page-grid-row:first-child { padding-bottom: 0; }
.page-image-wrapper  { grid-column: 1 / span 3; }
.page-image-container { width: 100%; }
.page-image-container img { width: 100%; height: auto; aspect-ratio: 0.7847 / 1; object-fit: cover; }
.page-description    { grid-column: 4 / span 5; }
.page-description p  {
  font-family: var(--font-secondary); font-weight: 500; font-size: 18px;
  letter-spacing: 0.3px; line-height: 1.5; color: var(--text-color);
}
.page-list-section { padding-top: var(--page-section-gap); }
.page-section-heading { grid-column: 1 / span 3; }
.page-section-heading h2 {
  font-family: var(--font-secondary); font-weight: 500; font-size: 18px;
  letter-spacing: 0.3px; line-height: 1.3; color: var(--text-color);
}
.page-list-column    { grid-column: 4 / span 5; display: flex; flex-direction: column; gap: var(--page-list-item-gap); }
.page-list-column p  {
  font-family: var(--font-secondary); font-weight: 500; font-size: 18px;
  letter-spacing: 0.3px; line-height: 1.3; color: var(--text-color);
}

/* ===========================================================================
   404 PAGE NOT FOUND
=========================================================================== */
.not-found-content {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap); width: 100%; max-width: 100%; padding: 0;
}
.not-found-heading { grid-column: 1 / span 3; align-self: start; justify-self: start; }
.not-found-heading p,
.not-found-text {
  font-family: var(--font-secondary); font-size: 18px; font-weight: 500;
  letter-spacing: 0.3px; line-height: 1.3; color: var(--text-color); white-space: pre-wrap;
}
.not-found-details {
  grid-column: 4 / span 5;
  display: flex; flex-direction: column; gap: 20px;
  align-items: flex-start; align-self: start; justify-self: start;
}
.return-home-link {
  font-family: var(--font-secondary); font-size: 18px; font-weight: 500;
  letter-spacing: 0.3px; line-height: 1; color: var(--text-color);
  text-decoration: none; padding: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.return-home-link:hover { opacity: 0.7; }

/* ===========================================================================
   GRID UTILITY CLASSES
=========================================================================== */
/* --- Spans --- */
.span-1  { grid-column: auto / span 1;   }
.span-2  { grid-column: auto / span 2;   }
.span-3  { grid-column: auto / span 3;   }
.span-4  { grid-column: auto / span 4;   }
.span-5  { grid-column: auto / span 5;   }
.span-6  { grid-column: auto / span 6;   }
.span-7  { grid-column: auto / span 7;   }
.span-8  { grid-column: auto / span 8;   }
.span-9  { grid-column: auto / span 9;   }
.span-10 { grid-column: auto / span 10;  }
.span-11 { grid-column: auto / span 11;  }
.span-12 { grid-column: auto / span 12;  }

/* --- Grid start/end placement --- */
.col-start-1  { grid-column-start: 1; }  .col-end-1  { grid-column-end: 1; }
.col-start-2  { grid-column-start: 2; }  .col-end-2  { grid-column-end: 2; }
.col-start-3  { grid-column-start: 3; }  .col-end-3  { grid-column-end: 3; }
.col-start-4  { grid-column-start: 4; }  .col-end-4  { grid-column-end: 4; }
.col-start-5  { grid-column-start: 5; }  .col-end-5  { grid-column-end: 5; }
.col-start-6  { grid-column-start: 6; }  .col-end-6  { grid-column-end: 6; }
.col-start-7  { grid-column-start: 7; }  .col-end-7  { grid-column-end: 7; }
.col-start-8  { grid-column-start: 8; }  .col-end-8  { grid-column-end: 8; }
.col-start-9  { grid-column-start: 9; }  .col-end-9  { grid-column-end: 9; }
.col-start-10 { grid-column-start: 10; } .col-end-10 { grid-column-end: 10; }
.col-start-11 { grid-column-start: 11; } .col-end-11 { grid-column-end: 11; }
.col-start-12 { grid-column-start: 12; } .col-end-12 { grid-column-end: 12; }
                                              .col-end-13 { grid-column-end: 13; }

/* --- Row spans --- */
.row-span-1   { grid-row: auto / span 1; }
.row-span-2   { grid-row: auto / span 2; }
.row-span-3   { grid-row: auto / span 3; }
.row-span-4   { grid-row: auto / span 4; }
.row-span-5   { grid-row: auto / span 5; }
.row-span-6   { grid-row: auto / span 6; }
.row-span-7   { grid-row: auto / span 7; }
.row-span-8   { grid-row: auto / span 8; }
.row-span-9   { grid-row: auto / span 9; }
.row-span-10  { grid-row: auto / span 10; }
.row-span-11  { grid-row: auto / span 11; }
.row-span-12  { grid-row: auto / span 12; }

/* --- Row positioning --- */
.row-start-1  { grid-row-start: 1; }  .row-end-1  { grid-row-end: 1; }
.row-start-2  { grid-row-start: 2; }  .row-end-2  { grid-row-end: 2; }
.row-start-3  { grid-row-start: 3; }  .row-end-3  { grid-row-end: 3; }
.row-start-4  { grid-row-start: 4; }  .row-end-4  { grid-row-end: 4; }
.row-start-5  { grid-row-start: 5; }  .row-end-5  { grid-row-end: 5; }
.row-start-6  { grid-row-start: 6; }  .row-end-6  { grid-row-end: 6; }
.row-start-7  { grid-row-start: 7; }  .row-end-7  { grid-row-end: 7; }
.row-start-8  { grid-row-start: 8; }  .row-end-8  { grid-row-end: 8; }
.row-start-9  { grid-row-start: 9; }  .row-end-9  { grid-row-end: 9; }
.row-start-10 { grid-row-start: 10; } .row-end-10 { grid-row-end: 10; }
.row-start-11 { grid-row-start: 11; } .row-end-11 { grid-row-end: 11; }
.row-start-12 { grid-row-start: 12; } .row-end-12 { grid-row-end: 12; }
                                         .row-end-13 { grid-row-end: 13; }

/* --- Alignment utilities --- */
.justify-start   { justify-self: start !important; }
.justify-end     { justify-self: end !important; }
.justify-center  { justify-self: center !important; }
.justify-stretch { justify-self: stretch !important; }

.align-start     { align-self: start !important; }
.align-end       { align-self: end !important; }
.align-center    { align-self: center !important; }
.align-stretch   { align-self: stretch !important; }

/* --- Utility: Order for grid/flex --- */
.order-1  { order: 1; }   .order-2  { order: 2; }
.order-3  { order: 3; }   .order-4  { order: 4; }
.order-5  { order: 5; }   .order-6  { order: 6; }
.order-7  { order: 7; }   .order-8  { order: 8; }
.order-9  { order: 9; }   .order-10 { order: 10; }

/* --- Utility: gap sizes --- */
.gap-0   { gap: 0 !important; }
.gap-5   { gap: 5px !important; }
.gap-10  { gap: 10px !important; }
.gap-15  { gap: 15px !important; }
.gap-20  { gap: 20px !important; }
.gap-30  { gap: 30px !important; }
.gap-40  { gap: 40px !important; }
.gap-60  { gap: 60px !important; }
.gap-80  { gap: 80px !important; }
.gap-100 { gap: 100px !important; }

/* --- Utility: full width/height in grid --- */
.full-width  { grid-column: 1 / -1 !important; }
.full-height { grid-row: 1 / -1 !important; }

/* --- Utility: show/hide, centering etc. --- */
.hide { display: none !important; }
.show { display: block !important; }
.center-flex { display: flex !important; align-items: center !important; justify-content: center !important; }
.center-grid { display: grid !important; align-items: center !important; justify-items: center !important; }
.hr-cols     { grid-column: 1 / -1; border: 0; border-bottom: 1px solid var(--border-color); margin: 0; width: 100%; }

.spacer-column  {}  /* For grid gap/empty col cells */
.hidden-mobile  {}  /* Set in responsive, see below */
.hidden-tablet  {}

/* ===========================================================================
   FOOTER
=========================================================================== */
.bottom-footer {
  position: relative;
  width: 100%;
  padding-top: var(--footer-padding-top);
  padding-bottom: var(--footer-padding-bottom);
  color: var(--footer-text-color);
  mix-blend-mode: difference;
  margin-top: auto;
}
.bottom-footer .footer-column-container {
  max-width: 100%; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  padding-left: var(--content-padding-x); padding-right: var(--content-padding-x);
  justify-content: center; align-items: flex-start; align-content: flex-start;
}
.footer-column {
  display: flex; flex-direction: column; gap: var(--footer-column-gap);
  font-family: var(--font-secondary); font-size: 18px; font-weight: 500;
  letter-spacing: .3px; line-height: 1;
  align-items: flex-start; justify-self: start; align-self: start; overflow: visible; min-width: 0;
}
.footer-column a {
  color: var(--footer-text-color); display: inline-flex; align-items: center; white-space: pre;
}
.footer-column a:hover { opacity: 0.7; text-decoration: none; }
.footer-column:nth-child(1) { grid-column: 1 / span 3; }
.footer-column:nth-child(2) { grid-column: 4 / span 6; }
.footer-column:nth-child(3) { grid-column: 10 / span 3; }

/* ===========================================================================
   RESPONSIVE: TABLET
=========================================================================== */
@media (max-width: 1199px) and (min-width: 810px) {
  :root {
    --grid-gap: 15px;
    --column-gap: 15px;
    --row-gap: 30px;
    --sticky-top-offset: 75px;
    --page-section-gap: 40px;
    --footer-padding-top: 150px;
  }

  .gallery, .commercial-gallery, .archive-list-container, .project-page-container, .page-page-container, .not-found-container, .editorial-page-container, .header-content, .bottom-footer .footer-column-container {
    max-width: 810px;
  }

  .header-content { gap: var(--grid-gap); }
  .nav-group-1    { grid-column: 4 / span 5; }
  .nav-group-2    { grid-column: 9 / span 4; }
  .main-nav       { gap: var(--nav-link-gap); }

  .gallery .card-parsing { grid-column: 7 / span 6; }
  .commercial-gallery .gallery-column.span-3 { grid-column: auto / span 4; }
  .commercial-gallery .gallery-column.span-5 { grid-column: auto / span 8; }
  .commercial-gallery .gallery-column.span-4 { grid-column: auto / span 12; margin-top: var(--row-gap); }

  .item-category  { grid-column: 4 / span 5; }
  .item-year      { grid-column: 9 / span 4; }
  .item-hover-image { right: 0; }

  .project-details      { grid-column: 1 / span 4; }
  .project-main-image   { grid-column: 5 / span 4; }
  .project-image-column { grid-column: 3 / span 8; }
  .next-project-details { grid-column: 1 / span 4; }
  .next-project-image   { grid-column: 5 / span 4; }

  .page-image-wrapper     { grid-column: 1 / span 4; }
  .page-description       { grid-column: 5 / span 8; }
  .page-section-heading   { grid-column: 1 / span 4; }
  .page-list-column       { grid-column: 5 / span 8; }
  .hidden-tablet          { display: none; }

  .not-found-content      { max-width: 810px; }
  .not-found-heading      { grid-column: 1 / span 3; }
  .not-found-details      { grid-column: 4 / span 5; }

  .bottom-footer                    { padding-top: var(--footer-padding-top); }
  .bottom-footer .footer-column-container { max-width: 810px; gap: var(--grid-gap); }
  .footer-column:nth-child(1) { grid-column: 1 / span 3; }
  .footer-column:nth-child(2) { grid-column: 4 / span 5; }
  .footer-column:nth-child(3) { grid-column: 9 / span 4; }
}

/* ===========================================================================
   RESPONSIVE: MOBILE
=========================================================================== */
@media (max-width: 809px) {
  :root {
    --grid-gap: 10px;
    --column-gap: 10px;
    --row-gap: 30px;
    --content-padding-top: 40px;
    --content-bottom-padding: 60px;
    --sticky-top-offset: 15px;
    --page-section-gap: 30px;
    --page-padding-top: 40px;
    --page-bottom-padding: 60px;
    --not-found-padding-top: 30px;
    --not-found-padding-bottom: 30px;
    --not-found-min-height: auto;
    --footer-mobile-padding-top: 80px;
    --footer-mobile-gap: 40px;
  }


  .gallery, .commercial-gallery, .archive-list-container, .project-page-container, editorial-page-container, .page-page-container, .not-found-container, .header-content, .bottom-footer .footer-column-container {
    max-width: none;
    width: 100%;
    padding-left: var(--content-padding-x);
    padding-right: var(--content-padding-x);
  }
  .gallery, .commercial-gallery, .archive-list-container, .project-page-container, .page-page-container {
    padding-top: var(--content-padding-top);
    padding-bottom: var(--content-bottom-padding);
  }
  .not-found-container {
    padding-top: var(--content-padding-top);
    padding-bottom: var(--content-bottom-padding);
    min-height: var(--not-found-min-height);
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Header adjust */
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: 0 var(--content-padding-x);
  }
  .main-nav.desktop-nav { display: none; }
  .mobile-menu-button   { display: block; margin-left: auto; color: white;}
  .header-logo, .nav-group-1, .nav-group-2 { grid-column: auto; }

  /* Gallery adjust */
  .gallery, .commercial-gallery { display: flex; flex-direction: column; gap: 40px; }
  .commercial-gallery .gallery-row, .commercial-gallery .gallery-column { display: contents; }
  .card, .gallery .card, .commercial-gallery .card, .gallery [class*='card-'], .commercial-gallery [class*='card-'] {
    grid-column: auto; padding-top: 0; margin-top: 0; align-self: auto; width: 100%;
  }

  /* Archive list adjust */
  .archive-list-item { grid-template-columns: repeat(6, 1fr); gap: var(--grid-gap); }
  .item-title    { grid-column: 1 / span 3; }
  .item-category { display: none; }
  .item-year     { grid-column: 4 / span 3; justify-self: end; text-align: right; }
  .item-hover-image { display: none; }

  /* Project page adjust */
  .project-header-grid { display: flex; flex-direction: column; gap: 25px; padding: 0 0 40px; }
  .project-details     { position: static; order: 1; text-align: left; align-items: start; width: 100%; }
  .project-main-image  { order: 2; width: 100%; }
  .project-main-image img   { aspect-ratio: 1 / 1; }
  .project-image-grid  { display: flex; flex-direction: column; gap: var(--project-image-gap); padding: 0 0 60px; }
  .project-image-column { grid-column: auto; width: 100%; }
  .next-project-section {
    display: flex; flex-direction: column; gap: 25px; padding: 0 0 60px;
  }
  .next-project-details { position: static; order: 2; text-align: left; width: 100%; }
  .next-project-image   { order: 1; width: 100%; }
  .next-project-image img { aspect-ratio: 1 / 1; }

  /* Page page adjust */
  .page-page-container  { gap: var(--page-section-gap); }
  .page-grid-row        { display: flex; flex-direction: column; gap: 20px; padding: 0; }
  .page-image-wrapper   { width: 100%; margin: 0; order: 1; grid-column: 1 / -1; }
  .page-description     { width: 100%; order: 2; grid-column: 1 / -1; }
  .page-list-section    { padding: 0; gap: 20px; display: flex; flex-direction: column; width: 100%; }
  .page-section-heading,
  .page-list-column     { width: 100%; order: initial; grid-column: 1 / -1; }
  .page-list-column     { gap: var(--page-list-item-gap); }
  .page-list-column p   { white-space: normal; }

  /* 404 page adjust */
  .hidden-mobile, .hidden-tablet, .spacer-column { display: none; }
  .not-found-content {
    display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 0; max-width: none;
  }
  .not-found-heading,
  .not-found-details { grid-column: auto; width: 100%; text-align: left; align-items: flex-start; }
  .not-found-details { gap: 20px; }

  /* Footer adjust */
  .bottom-footer {
    padding-top: var(--footer-mobile-padding-top);
    padding-bottom: var(--footer-padding-bottom);
    padding-left: var(--content-padding-x);
    padding-right: var(--content-padding-x);
    mix-blend-mode: difference; color: var(--footer-text-color);
  }
  .bottom-footer .footer-column-container {
    display: flex; flex-direction: column;
    gap: var(--footer-mobile-gap);
    align-items: flex-start;
    max-width: none; padding-left: 0; padding-right: 0;
  }
  .footer-column {
    align-items: flex-start; text-align: left; width: auto;
    grid-column: auto; align-self: flex-start;
  }
}

/* ===========================================================================
   EDITORIAL PAGE (Based on Project Page Styles)
=========================================================================== */
.editorial-page-container {
  padding-top: var(--project-padding-top); /* Using same vars for now */
  padding-bottom: var(--project-bottom-padding);
  max-width: 100%;
}
.editorial-header-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  padding-bottom: 50px;
  position: relative;
  width: 100%;
}
.editorial-details {
  grid-column: 1 / span 3;
  position: sticky; top: var(--sticky-top-offset);
  align-self: start;
  display: flex; flex-direction: column; gap: var(--project-detail-gap); /* Using same var */
  font-family: var(--font-secondary);
  font-weight: 500; letter-spacing: 0.3px;
}
.editorial-details h1 {
  font-size: 18px; line-height: 1; color: var(--text-color); margin-bottom: 5px;
}
.editorial-details p  {
  font-size: 18px; line-height: 1; color: var(--details-text-color);
}
/* Specific classes within details */
.editorial-client,
.editorial-year {
   /* Styles inherited from .editorial-details p */
}

.editorial-main-image    {
  grid-column: 4 / span 3; align-self: start;
}
.editorial-main-image img {
  aspect-ratio: .70625 / 1; object-fit: cover; width: 100%; height: auto;
}

.editorial-image-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap); padding-bottom: 40px; width: 100%;
}
.editorial-image-column {
  padding-top: 20px;
  grid-column: 4 / span 6; display: flex; flex-direction: column; gap: var(--project-image-gap); /* Using same var */
}
.editorial-image-item img {
  width: 100%; height: auto; display: block;
}

.editorial-text-block {
  padding-top: 20px;
  padding-bottom: 20px;
}

.editorial-text-block p {
  font-family: var(--font-secondary);
  padding-bottom: 40px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.3px;
  line-height: 1.5;
  color: var(--text-color);
}

.next-editorial-section {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap); padding: 0; position: relative; width: 100%;
}
.next-editorial-details {
  grid-column: 1 / span 3;
  position: sticky; top: var(--sticky-top-offset);
  align-self: start; display: flex; flex-direction: column; gap: var(--project-detail-gap); /* Using same var */
  font-family: var(--font-secondary);
  font-weight: 500; letter-spacing: 0.3px;
  text-decoration: none; color: var(--text-color);
}
.next-editorial-details p {
  font-size: 18px; line-height: 1;
}
.next-editorial-details .next-editorial-client, /* Changed class */
.next-editorial-details .next-editorial-year { /* Changed class */
  color: var(--details-text-color);
}
.next-editorial-details:hover {
  opacity: 0.7;
}
.next-editorial-image {
  grid-column: 4 / span 3; align-self: start;
}
.next-editorial-image img {
  aspect-ratio: .70625 / 1; object-fit: cover; width: 100%; height: auto;
}

/* ===========================================================================
   RESPONSIVE: EDITORIAL PAGE (Based on Project)
=========================================================================== */

/* --- Tablet --- */
@media (max-width: 1199px) and (min-width: 810px) {
  .editorial-page-container {
    max-width: 810px;
  }
  .editorial-details      { grid-column: 1 / span 4; }
  .editorial-main-image   { grid-column: 5 / span 4; }
  .editorial-image-column { grid-column: 3 / span 8; }
  .next-editorial-details { grid-column: 1 / span 4; }
  .next-editorial-image   { grid-column: 5 / span 4; }
}

/* --- Mobile --- */
@media (max-width: 809px) {
  .editorial-page-container {
    max-width: none;
    width: 100%;
    padding-left: var(--content-padding-x);
    padding-right: var(--content-padding-x);
    padding-top: var(--content-padding-top);    /* Adjusted padding for consistency */
    padding-bottom: var(--content-bottom-padding); /* Adjusted padding for consistency */
  }

  .editorial-header-grid {
    display: flex; flex-direction: column; gap: 25px; padding: 0 0 40px;
  }
  .editorial-details     {
    position: static; order: 1; text-align: left; align-items: start; width: 100%;
  }
  .editorial-main-image  {
    order: 2; width: 100%;
  }
  .editorial-main-image img   {
    aspect-ratio: 1 / 1;
  }
  .editorial-image-grid  {
    display: flex; flex-direction: column; gap: var(--project-image-gap); padding: 0 0 60px; /* Using same var */
  }
  .editorial-image-column {
    grid-column: auto; width: 100%;
  }
  .next-editorial-section {
    display: flex; flex-direction: column; gap: 25px; padding: 0 0 60px;
  }
  .next-editorial-details {
    position: static; order: 2; text-align: left; width: 100%;
  }
  .next-editorial-image   {
    order: 1; width: 100%;
  }
  .next-editorial-image img {
    aspect-ratio: 1 / 1;
  }
}