:root{
  --bg: #4b3528;      /* dark wood / coffee brown */
  --ink: #f5e8c7;     /* cream text */
  --teal: #0f5872;
  --outline: var(--ink); /* borders match text color */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Montserrat", sans-serif;
}

.page{
  max-width:1200px;
  margin:0 auto;
  padding:26px 36px 40px;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

/* HEADER */
.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
.brand-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.brand{
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  font-size:44px;
  letter-spacing:.5px;
}
.badge{
  width:56px;height:56px;
  border:2px solid var(--outline);
  background:#0b3f52;
  display:grid;place-items:center;
  overflow:hidden;
}
.badge img{width:100%;height:100%;object-fit:cover}
.ig{
  display:inline-grid;place-items:center;
  width:42px;height:42px;
  border:2px solid var(--ink);
  border-radius:12px;
  color:var(--ink);
  text-decoration:none;
}
.ig svg{width:24px;height:24px;fill:currentColor}

/* MAIN LAYOUT */
.grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:56px;
  padding-top:24px;
}

/* BIO */
.bio{
  max-width:580px;
  margin-left:100px;
  font-size:1.15rem;
  line-height:1.7;
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  letter-spacing:0.3px;
}
.bio h3{
  margin:0 0 12px 0;
  font-weight:800;
  font-family:"Montserrat", sans-serif;
  font-size:20px;
}
.bio p{margin:0 0 14px 0}

/* HERO IMAGE */
.hero{display:flex;justify-content:center}
.hero-frame{
  width:min(400px, 80vw);
  height:min(400px, 80vw);
  border:2px solid var(--outline);
  background:var(--teal);
  overflow:hidden;
}
.hero-img{
  object-position: center 30%;
  transform:rotate(0deg);
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* WORK TITLE */
.work-title{
  display:grid;place-items:center;
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  font-size:44px;
  padding-top:60px;
}

/* WORK SECTION */
.work-gallery{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  padding:40px 0 60px;
}

/* Video grid */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:30px;
  width:100%;
  max-width:900px;
  padding:0 20px;
}
.video-grid iframe{
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  border:2px solid var(--outline);
}

/* Masonry photo grid (pure CSS puzzle layout) */
.photo-masonry {
  column-count: 3;
  column-gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;   /* CENTER THE ENTIRE GRID */
  padding: 2rem 0;
}

.photo-masonry img{
  width:100%;
  height:auto;
  display:block;
  margin:0 0 16px;
  border:2px solid var(--outline);
  border-radius:12px;
  break-inside: avoid;
  transition:transform .2s ease, opacity .2s ease;
}
.photo-masonry img:hover{
  transform:scale(1.02);
  opacity:0.95;
}

/* EXPERIENCE & SKILLS SECTION */
.exp-skills{
  max-width:1100px;
  margin:40px auto 0;
  padding:20px 20px 0;
}
.section-title{
  text-align:center;
  font-size:32px;
  font-weight:800;
  margin-bottom:28px;
}
.exp-skills-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
}
.exp-skills-grid h3{
  font-size:20px;
  margin:0 0 12px;
}
.exp-skills-grid ul{
  list-style:disc;
  padding-left:20px;
  margin:0;
}
.exp-skills-grid li{
  margin-bottom:10px;
  font-size:0.98rem;
  line-height:1.6;
}

/* Responsive columns */
@media (max-width: 900px){
  .grid{grid-template-columns:1fr;gap:32px}
  .bio{margin-left:0;max-width:640px;text-align:center}
  .hero-frame{width:min(360px, 90vw);height:min(360px, 90vw)}
  .photo-masonry{column-count: 2;}
  .exp-skills-grid{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .photo-masonry{column-count: 1;}
}