* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#fafafa;
  color:#1a1a1a;
  font-family:'EB Garamond', serif;
  line-height:1.85;
  text-align:center;
}

/* HERO – aesthetic fonts */
.hero {
  padding:180px 20px 120px;
}
.hero h1 {
  font-family:'Playfair Display', serif;
  font-size:9rem;
  font-weight:800;
  letter-spacing:-4px;
  color:#111;
}
.tagline {
  font-size:1.8rem;
  color:#555;
  font-weight:600;
  letter-spacing:1px;
}

/* INTRO – perfect headshot/bio spacing */
.intro {
  max-width:1400px;
  margin:0 auto 200px;
  padding:0 60px;
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:160px;
  align-items:start;
}
.headshot img {
  width:100%;
  max-width:620px;
  border-radius:36px;
  box-shadow:0 50px 110px rgba(0,0,0,0.2);
}
.bio {
  text-align:left;
  font-size:1.5rem;
  font-weight:600;
  color:#222;
  padding-top:80px;
}
.bio p {
  margin-bottom:38px;
}

/* 2 FOLDER BOXES – perfectly even and centered */
.folders {
  margin: 0 auto 220px;
  padding: 0 40px;
}
.folders-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
}
.folder-box {
  background: #000;
  color: #fff;
  padding: 110px 40px;
  border-radius: 44px;
  text-decoration: none;
  transition: 0.5s ease;
  box-shadow: 0 35px 80px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.folder-box:hover {
  transform: translateY(-28px);
  box-shadow: 0 70px 140px rgba(0,0,0,0.6);
}
.folder-box h3 {
  font-family: 'Playfair Display', serif;
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 10px;
}
.folder-box p {
  font-size: 1.6rem;
  font-weight: 700;
  opacity: 0.95;
}

/* On small screens – stack nicely */
@media (max-width: 900px) {
  .folders-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

/* PHOTOS – transparent bg */
.photos {
  max-width:1400px;
  margin:0 auto;
  padding:0 20px 200px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:44px;
}
.photos img {
  width:100%;
  height:480px;
  object-fit:contain;
  background:transparent;
  padding:20px;
  border-radius:36px;
  box-shadow:0 30px 70px rgba(0,0,0,0.18);
}

/* SOCIAL BUBBLES */
.socials {
  padding:160px 20px 140px;
  background:#111;
}
.bubble {
  width:100px;
  height:100px;
  margin:0 36px;
}
.bubble img {
  width:70px;
  height:70px;
  border-radius:50%;
}
.bubble svg {
  width:58px;
  height:58px;
}

/* RESPONSIVE */
@media (max-width:1300px) {
  .folders { gap:60px; padding:0 40px; }
  .folder-box h3 { font-size:3.2rem; }
}
@media (max-width:900px) {
  .folders { grid-template-columns:1fr; gap:60px; }
  .hero h1 { font-size:6rem; }
  .intro { grid-template-columns:1fr; gap:80px; text-align:center; }
  .bio { padding-top:0; }
}
@media (max-width:640px) {
  .hero h1 { font-size:4.8rem; }
  .youtube-play-button { width:160px; height:160px; }
  .youtube-play-button svg { width:80px; height:80px; }
  .bubble { width:82px; height:82px; margin:0 16px; }
}

/* SOCIAL BUBBLES – all black & white, TikTok wider than YouTube */
.socials {
  padding:160px 20px 140px;
  background:#111;
  text-align:center;
}
.bubble {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100px;
  height:100px;
  background:#222;
  color:#fff;
  border-radius:50%;
  margin:0 36px;
  transition:0.4s;
  box-shadow:0 25px 50px rgba(0,0,0,0.4);
}
.bubble:hover {
  background:#000;
  transform:translateY(-14px);
  box-shadow:0 40px 80px rgba(0,0,0,0.6);
}
.bubble svg {
  width:58px;
  height:58px;
}
.bubble.tiktok {
  width:130px;   /* wider than the others */
}
.bubble.tiktok img {
  width:80px;
  height:80px;
  border-radius:50%;
}