@font-face { font-family: 'Gotham'; src: url('../fonts/SVN-Gotham.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Gotham'; src: url('../fonts/SVN-GothamBold.woff2') format('woff2'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Gotham'; src: url('../fonts/SVN-GothamLight.woff2') format('woff2'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Space Cowboy'; src: url('../fonts/SpaceCowboy-Clean.woff2') format('woff2'); font-weight: 400; font-style: normal; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f4f1ea; font-family: 'Gotham', sans-serif; -webkit-font-smoothing: antialiased; margin: 0; }
img { display: block; }
.site { width: 100%; }

/* ── HERO: paper texture — full-width bg, 1366 content ── */
.hero {
  width: 100%;
  background-image: url('../img/about/hero_section.webp');
  background-size: 1366px auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.hero-inner {
  width: 1366px;
  margin: 0 auto;
  height: 335px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-svg {
  width: 354px;
  height: auto;
  margin-top: 40px;
}

/* ── Blue divider ── */
.divider {
  width: 100%;
  height: 3px;
  background: #4a90c4;
}

/* ── TAN SECTION — full-width bg, 1366 content ── */
.tan {
  width: 100%;
  background-image: url('../img/about/tan_section.webp');
  background-size: 1366px auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.tan-inner {
  width: 1366px;
  margin: 0 auto;
  padding: 60px 120px 50px;
  text-align: center;
}
.subtitle-svg {
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto 50px;
  display: block;
}
.quote {
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
  max-width: 900px;
  margin: 0 auto 36px;
}
.body-text {
  font-family: 'Gotham', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
  font-weight: 300;
  max-width: 900px;
  margin: 0 auto 20px;
}
.cta-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 18px 48px;
  background: #635129;
  border-radius: 0;
  font-family: 'Space Cowboy', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ── DARK SECTION: village bg + bubbles ── */
/* ── DARK SECTION — full-width bg, 1366 content ── */
.dark {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.dark-inner {
  width: 1366px;
  margin: 0 auto;
  position: relative;
  height: 2051px;
}
.dark-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1366px;
  height: 100%;
  object-fit: cover;
}

/* Bubble cards — positioned at Figma coords (page_y = abs_y + 189 - 1072 for dark section relative) */
/* Vase group — positioned at original bubble locations */
.vase-group {
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

/* Vessel — scroll reveal, zoom on hover */
.vase {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: opacity 0.8s ease, transform 0.4s ease;
}
.vase-group.visible .vase {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.vase-group:hover .vase {
  transform: translateY(-5px) scale(1.08);
}

/* Bubble card — hidden, appears on hover */
.bubble {
  position: absolute;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 20;
}
.vase-group:hover .bubble {
  opacity: 1;
  transform: scale(1);
}
.bubble__shape {
  width: 100%;
  height: auto;
  display: block;
}
.bubble__shape {
  display: block;
  position: absolute;
}
.bubble__title {
  position: absolute;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  color: #4a1b0c;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bubble__body {
  position: absolute;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1.6;
}
.bubble__body p { margin: 0 0 6px; }
.bubble__body p:last-child { margin-bottom: 0; }
.bubble__body strong { font-weight: 700; }

/* Vase-group positions — same as original bubble positions */
.vase-group--6628 { left: 687px; top: 157px; width: 600px; }
.vase-group--6649 { left: 254px; top: 212px; width: 446px; }
.vase-group--6652 { left: 180px; top: 380px; width: 567px; }
.vase-group--6626 { left: 597px; top: 573px; width: 711px; }
.vase-group--6651 { left: -61px; top: 1116px; width: 690px; }
.vase-group--6627 { left: 440px; top: 1282px; width: 833px; }
.vase-group--6650 { left: 140px; top: 1355px; width: 533px; }

/* ── 6628: 3 FAVORITE SONGS — frame 600×416 ── */
.bubble--6628 { width: 600px; height: 416px; top: 0; left: 0; }
.bubble__shape--6628 { left: 0; top: 0; width: 80.35%; height: auto; }
.bubble__title--6628 { left: 86px; top: 24px; width: 321px; height: 50px; font-size: 20px; line-height: 1.2; color: #4a1b0c; }
.bubble__body--6628 { left: 48px; top: 80px; width: 405px; font-size: 13px; line-height: 1.6; }

/* ── 6649: 3 FAVORITE MOVIES — frame 446×294, Figma exact px ── */
.bubble--6649 { width: 446px; height: 294px; top: 0; left: 0; }
.bubble__shape--6649 { left: 107px; top: 0px; width: 339px; height: 212px; }
.bubble__title--6649 { left: 173px; top: 52px; width: 199px; height: 24px; font-size: 20px; line-height: 1.2; white-space: nowrap; color: #635129; }
.bubble__body--6649 { left: 152px; top: 89px; width: 252px; font-size: 13px; line-height: normal; }

/* ── 6652: WHAT I'M STILL FIGURING OUT — frame 567×370, Figma exact px ── */
.bubble--6652 { width: 567px; height: 370px; top: 0; left: 0; }
.bubble__shape--6652 { left: 188px; top: 0px; width: 379px; height: 237px; }
.bubble__title--6652 { left: 225px; top: 58px; width: 304px; height: 24px; font-size: 20px; line-height: 1.2; color: #635129; white-space: nowrap; }
.bubble__body--6652 { left: 236px; top: 96px; width: 282px; font-size: 13px; line-height: 1.6; }

/* ── 6626: 3 WEAKNESSES (UNFILTERED) — frame 711×507, Figma exact px ── */
.bubble--6626 { width: 711px; height: 507px; top: 0; left: 0; }
.bubble__shape--6626 { left: 191px; top: 0px; width: 520px; height: 324px; }
.bubble__title--6626 { left: 301px; top: 48px; width: 321px; height: 50px; font-size: 20px; line-height: 1.2; color: #635129; white-space: nowrap; }
.bubble__body--6626 { left: 259px; top: 105px; width: 405px; font-size: 13px; line-height: 1.6; }

/* ── 6651: 3 FAVORITE COMMERCIALS — frame 690×495, Figma exact px ── */
.bubble--6651 { width: 690px; height: 495px; top: 0; left: 0; }
.bubble__shape--6651 { left: 301px; top: 0px; width: 389px; height: 243px; }
.bubble__title--6651 { left: 359px; top: 44px; width: 273px; height: 24px; font-size: 20px; line-height: 1.2; color: #635129; white-space: nowrap; }
.bubble__body--6651 { left: 360px; top: 77px; width: 278px; font-size: 13px; line-height: 1.6; }

/* ── 6650: 3 RANDOM FACTS ABOUT ME — frame 533×346, Figma exact px ── */
.bubble--6650 { width: 533px; height: 346px; top: 0; left: 0; }
.bubble__shape--6650 { left: 154px; top: 0px; width: 379px; height: 237px; }
.bubble__title--6650 { left: 205px; top: 53px; width: 291px; height: 24px; font-size: 20px; line-height: 1.2; color: #635129; white-space: nowrap; }
.bubble__body--6650 { left: 223px; top: 89px; width: 250px; font-size: 13px; line-height: 1.6; }

/* ── 6627: 3 WORK EXPERIENCE — frame 833×603, Figma exact px ── */
.bubble--6627 { width: 833px; height: 603px; top: 0; left: 0; }
.bubble__shape--6627 { left: 0px; top: 0px; width: 558px; height: 347px; }
.bubble__title--6627 { left: 114px; top: 40px; width: 321px; height: 50px; font-size: 20px; line-height: 1.2; color: #635129; }
.bubble__body--6627 { left: 75px; top: 100px; width: 456px; font-size: 13px; line-height: 1.6; }

/* ════════════ RESPONSIVE ════════════ */

/* Dark section scale wrapper */
.dark-scale-wrapper {
  width: 100%;
  overflow: hidden;
}

@media (max-width: 1366px) {
  .hero-inner { width: 100%; max-width: 1366px; }
  .tan-inner { width: 100%; max-width: 1366px; padding: 60px 5% 50px; }
  .hero { background-size: cover; }
  .tan { background-size: cover; }

  .dark-inner {
    transform-origin: top left;
  }
  .dark-bg { width: 1366px; }
}

@media (max-width: 768px) {
  .title-svg { width: 220px; margin-top: 30px; }
  .hero-inner { height: 220px; }
  .tan-inner { padding: 40px 20px 30px; }
  .subtitle-svg { max-width: 100%; margin-bottom: 30px; }
  .quote, .body-text { font-size: 13px; max-width: 100%; }
  .cta-btn { font-size: 18px; padding: 14px 30px; letter-spacing: 1px; }
}

@media (max-width: 480px) {
  .title-svg { width: 180px; margin-top: 20px; }
  .hero-inner { height: 180px; }
  .tan-inner { padding: 30px 16px 24px; }
  .quote, .body-text { font-size: 12px; }
  .cta-btn { font-size: 14px; padding: 12px 24px; }
}