body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

:root {
  --cell-pad: 12px;
  --nav-link-light: #bbbbbb; /* light gray */
  --highlight-green: #e2fed9;
}

.page-wrapper {
  max-width: 1424px; /* Match .container_2 below */
  margin: 0 auto;
  min-height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container_1 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: transparent;
  margin-bottom: 0 !important;
  padding: 0;
  margin-top: 10px; 
}

.header-nav {
  display: flex;
  justify-content: center;
  gap: 100px;
  width: 100%;
  padding: 0;
  margin: 0;
}

.header-nav .nav-link {
  font-size: 1.15em;
  letter-spacing: 1px;
  margin-right: 0;
  color: var(--nav-link-light) !important;
}

.header-nav .nav-link:hover,
.header-nav .nav-link:focus {
  color: #000 !important;
}

/* --- Typography --- */

h1, h2, p { font-family: "Roboto", sans-serif; }

h1{
  font-size: 84px;
  font-weight: bolder;
  margin: 0;
}

h2{
  font-size: 30px;
  padding: 0;
  font-weight: bold;
  margin: 0;
  display: inline-block;
}

p{
  font-size: 16px;
  margin: 0;
  padding: 0;
}

/* Justify paragraphs in text_work and text_linesandlens */
.text_work p,
.text_linesandlens p {
  text-align: left;
}

/* --- Grid Container --- */
.main-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  /* Push content below header */
  flex: 1 0 0;
  margin-top: 10px;             /* Add space below header */
}

.container_2 {
  display: grid;
  grid-template-columns: 440px 320px 320px 320px;
  grid-template-rows: 60px 220px 220px 60px 220px 220px;
  gap: 8px;
  padding: 0;
  margin: 0 auto;
  max-width: 1448px;
  background: transparent;
  box-sizing: border-box;
  justify-content: center;
}

/* Grid cell padding for text cells */
.grain,
.colorfill {
  box-sizing: border-box;
  padding: var(--cell-pad);
}

/* Remove padding for image cells (full bleed) */
.post_MainVisual,
.post_2,
.post_3,
.post_4,
.post_5 {
  padding: 0;
}

.grain {
  position: relative;
  background: rgb(251, 237, 237);
  overflow: hidden;
  transition: background 0.2s;
  cursor: pointer;
}

.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../assets/noise.svg);
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s;
}

.grain > * {
  position: relative;
  z-index: 2;
}

.nav_heading .nav_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.arrow-icon {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  filter: invert(0);
  margin-left: auto;
}

/* Place each in their own grid cell */
.nav_work{
  grid-area: 1/3/2/4;
}
.text_work{
  grid-area: 2/3/3/4;
}
.nav_about{
  grid-area: 1/4/2/5;
}
.nav_linesandlens{
  grid-area: 4/3/5/4;
}

.name {
  grid-area: 2/4/3/5;
  padding: 0;
  margin: 0;
  position: relative;
}

.name .fill-link {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
}

.name h1 {
  margin: 0;
  margin-left: 1rem;
  width: 100%;
  text-align: left;
}

.post_MainVisual{
  grid-area: 1/1/5/3;
}
.post_2{
  grid-area: 3/3/4/5;
}
.post_3{
  grid-area: 6/3/7/5;
}
.post_4{
  grid-area: 4/4/6/5;
}
.post_5{
  grid-area: 5/2/7/3;
}

.text_keywords{
  margin: 0;
  padding: 0;
  font-size: 40px;
  font-weight: bold;
  grid-area: 5/1/7/2;
  color: transparent;
	-webkit-text-stroke: 1px #fff;
}

.keywords{
  margin: 20px;
  list-style-type: none
}

.text_linesandlens{
  grid-area: 5/3/6/4;
}

.px-2{
  color: white;
}

/* Synchronized highlight for both .nav_work and .text_work */
.sync-hover {
  background-color: var(--highlight-green) !important;
}
.sync-hover::before {
  opacity: 0.15 !important;
}

/* Make .fill-link cover the entire .grain cell and be accessible */
.fill-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--cell-pad);
}
.grain > .fill-link > * {
  position: relative;
  z-index: 3;
}
.grain {
  position: relative;
}
.fill-link:focus {
  outline: 2px solid #67c46b;
  outline-offset: 2px;
}


.grain[role="button"], .grain.button-like {
  outline: none;
}
.grain[role="button"]:focus, .grain.button-like:focus {
  box-shadow: 0 0 0 2px #9ee8a6;
}

/* footer_START */
.footer-container {
  grid-column: 1 / -1; /* Span all columns */
  width: 100%;
  padding: 0 0 24px 0;
  text-align: center;
  margin-top: 24px;
}
.footer-line {
  border: none;
  border-top: 1.5px solid #bbb;
  margin: 0 0 12px 0;
  width: 100%;
}
.footer-copy {
  font-size: 0.90rem;
  color: #666;
  margin: 0;
}
/* footer_END */



/* OPTIONAL Shared base hover style--radius border_START */
.grain.sync-hover {
  background-color: var(--highlight-green, #caffcb);
  transition: border 0.2s, border-radius 0.2s, background 0.2s;
}

/* Work pair */
.nav_work.sync-hover,
.nav_about.sync-hover,
.nav_linesandlens.sync-hover {
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.text_work.sync-hover,
.name.sync-hover,
.text_linesandlens.sync-hover {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}
/* OPTIONAL Shared base hover style--radius border_END */


/* Responsiveness (@media) */
/* mobile: 2-column, 8-row grid */
@media (max-width: 480px) {
  :root {
  --cell-pad: 6px;}

  .main-center {
  margin-top: 0px;}
  
  .container_2 {
    display: grid;
    grid-template-columns: 180px 180px;
    grid-template-rows: 330px 35px 130px 130px 260px 35px 130px 130px;
    gap: 6px;
    width: 366px;
  }

  .header-nav {gap: 15px;}
  .header-nav .nav-link {
  font-size: 10px;}

  .post_MainVisual {grid-area: 1/1/2/3;}
  .nav_work {grid-area: 2/1/3/2;}
  .nav_about {grid-area: 2/2/3/3;}
  .name {grid-area: 3/2/4/3;}
  .text_work {grid-area: 3/1/4/2;}
  .post_2 {grid-area: 4/1/5/3;}
  .text_keywords {grid-area: 5/1/6/2; font-size: 18px; -webkit-text-stroke: 0.5px #fff;}
  .post_5 {grid-area: 5/2/6/3;}
  .nav_linesandlens {grid-area: 6/1/7/2;}
  .text_linesandlens {grid-area: 7/1/8/2;}
  .post_4 {grid-area: 6/2/8/3;}
  .post_3 {grid-area: 8/1/9/3;}
  .keywords{margin:0px; margin-top: 2px; padding-left: 6px;}

  .arrow-icon {width: 1em; height: 1em;}

  .footer-line {margin: 0 0 2px 0;}
  .footer-copy {font-size: 8px;}
  .footer-container {padding: 0 0 6px 0; margin-top: 6px;}

  .name h1 {
    font-size: 36px;
    text-align: center;
    margin-left: 0;  }

  h1 { font-size: 36px; }
  h2 { font-size: 20px; }
  p  { font-size: 10px; }
  /* Any other mobile-specific overrides */
}




/* Tablet & Mobile: 2-column, 8-row grid */
@media (min-width: 481px) and (max-width: 1024px) {
  .container_2 {
    display: grid;
    grid-template-columns: 380px 380px;
    grid-template-rows: 700px 75px 275px 275px 550px 75px 275px 275px;
    gap: 8px;
    width: 768px; /* 400 + 400 + gap (adjust as necessary) */    
  }
  
  /* ... rest of your grid-area assignments ... */
  .header-nav {gap: 60px;}

  .post_MainVisual {grid-area: 1/1/2/3;}
  .nav_work {grid-area: 2/1/3/2;}
  .nav_about {grid-area: 2/2/3/3;}
  .name {grid-area: 3/2/4/3;}
  .text_work {grid-area: 3/1/4/2;}
  .post_2 {grid-area: 4/1/5/3;}
  .text_keywords {grid-area: 5/1/6/2; font-size: 36px; -webkit-text-stroke: 0.8px #fff;}
  .post_5 {grid-area: 5/2/6/3;}
  .nav_linesandlens {grid-area: 6/1/7/2;}
  .text_linesandlens {grid-area: 7/1/8/2;}
  .post_4 {grid-area: 6/2/8/3;}
  .post_3 {grid-area: 8/1/9/3;}
  .keywords{margin: 5px; margin-top: 25px;}

  h1{font-size: 75px;}
  h2{font-size: 40px;}
  p{font-size: 20px;}

  .name h1 {
    font-size: 75px;
    text-align: center;
    margin-left: 0;  }
}

/* Laptop/Desktop: restore desktop grid */
@media (min-width: 1025px) {
  .container_2 {
    display: grid;
    grid-template-columns: 440px 320px 320px 320px;
    grid-template-rows: 60px 220px 220px 60px 220px 220px;
    gap: 16px;
    width: 100%;
    max-width: 1448px;
    margin: 0 auto;
    padding: 0;
  }
}