/* Boss Up Travels — shared styles */

  :root{
    --cream:#FFF6E8;
    --pink:#1F7A7D;
    --yellow:#FFC94A;
    --turq:#D2703F;
    --plum:#2A1B33;
    --tape: rgba(255,201,74,0.6);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:var(--cream);
    color:var(--plum);
    font-family:'DM Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1080px; margin:0 auto; padding:0 32px;}
  .script{font-family:'Caveat', cursive;}
  .display{font-family:'Bricolage Grotesque', sans-serif;}

  /* ===== NAV ===== */
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 32px;
  }
  .logo{font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:20px; color:var(--plum);}
  .logo span{color:var(--pink);}
  .nav-links{display:flex; gap:30px; align-items:center;}
  .nav-links a{color:var(--plum); text-decoration:none; font-size:14px; font-weight:500; opacity:0.75;}
  .nav-cta{
    background:var(--yellow); color:var(--plum); padding:10px 22px; border-radius:100px;
    font-size:13px; font-weight:700; text-decoration:none;
  }

  /* ===== HERO COLLAGE ===== */
  .hero{padding:36px 0 70px; position:relative;}
  .collage{
    position:relative; min-height:460px; display:flex; align-items:center;
  }
  .headline{
    position:relative; z-index:5; max-width:480px;
  }
  .headline .eyebrow{
    font-family:'Caveat', cursive; font-size:24px; color:var(--pink); font-weight:700;
    display:inline-block; transform:rotate(-3deg); margin-bottom:6px;
  }
  .headline h1{
    font-size:52px; line-height:1; font-weight:800; letter-spacing:-0.02em;
  }
  .headline h1 .hl{
    background:var(--yellow); padding:0 10px; display:inline-block; transform:rotate(-1deg);
  }
  .headline p{margin-top:18px; font-size:15px; max-width:360px; opacity:0.75; line-height:1.6;}
  .headline .ctas{display:flex; gap:12px; margin-top:26px;}
  .btn-solid{
    background:var(--pink); color:#fff; padding:13px 22px; border-radius:100px;
    font-size:14px; font-weight:600; text-decoration:none;
  }
  .btn-outline{
    border:2px solid var(--plum); color:var(--plum); padding:11px 22px; border-radius:100px;
    font-size:14px; font-weight:600; text-decoration:none;
  }
  .btn-outline-white{
    border:2px solid #fff; color:#fff; padding:11px 22px; border-radius:100px;
    font-size:14px; font-weight:600; text-decoration:none;
  }

  /* ===== TOP PHOTO HERO ===== */
  .top-photo{
    position:relative; width:100%; height:600px; border-radius:24px; overflow:hidden;
    background-size:cover; background-position:center 64%;
  }
  .photo-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(42,27,51,0.05) 0%, rgba(42,27,51,0.35) 55%, rgba(42,27,51,0.88) 100%);
  }
  .headline-on-photo{
    position:absolute; left:44px; right:44px; bottom:40px; z-index:2; color:#fff; max-width:600px;
  }
  .headline-on-photo .eyebrow{
    font-family:'Caveat', cursive; font-size:22px; color:var(--yellow); font-weight:700;
    display:inline-block; transform:rotate(-3deg); margin-bottom:6px;
  }
  .headline-on-photo h1{
    font-family:'Bricolage Grotesque', sans-serif; font-size:44px; line-height:1.05; font-weight:800; letter-spacing:-0.02em;
  }
  .headline-on-photo h1 .hl{
    background:var(--yellow); color:var(--plum); padding:0 10px; display:inline-block; transform:rotate(-1deg);
  }
  .headline-on-photo p{margin-top:14px; font-size:13.5px; line-height:1.6; opacity:0.92; max-width:540px;}
  .headline-on-photo .ctas{display:flex; gap:12px; margin-top:22px;}

  .polaroid{
    position:absolute; background:#fff; padding:14px 14px 44px; border-radius:4px;
    box-shadow:0 14px 28px rgba(42,27,51,0.16);
  }
  .polaroid .frame{
    width:100%; height:100%; border-radius:2px;
    background:repeating-linear-gradient(135deg, var(--turq), var(--turq) 12px, #2c99a8 12px, #2c99a8 24px);
    display:flex; align-items:center; justify-content:center;
    text-align:center; color:rgba(255,255,255,0.9); font-size:12px; font-weight:600;
  }
  .polaroid .cap{
    position:absolute; bottom:10px; left:14px; right:14px;
    font-family:'Caveat', cursive; font-size:17px; color:var(--plum); text-align:center;
  }
  .p2{width:170px; height:200px; right:70px; bottom:-36px; top:auto; transform:rotate(8deg); z-index:3;}
  .p3{width:150px; height:180px; left:60px; right:auto; bottom:-30px; transform:rotate(-9deg); z-index:4;}
  .p3 .frame{background:repeating-linear-gradient(135deg, var(--yellow), var(--yellow) 12px, #eab534 12px, #eab534 24px); color:var(--plum);}

  .tape{
    position:absolute; width:90px; height:28px; background:var(--tape);
    box-shadow:0 2px 4px rgba(0,0,0,0.08);
  }
  .t1{right:110px; bottom:120px; top:auto; transform:rotate(-30deg); z-index:6;}
  .t2{left:130px; bottom:140px; top:auto; transform:rotate(28deg); z-index:6;}

  .addphoto{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.85); font-size:11px; font-weight:600; text-align:center; padding:10px;
  }

  /* ===== TIKTOK STRIP ===== */
  .tiktoks{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
  .tiktok-card{
    background:#fff; border-radius:16px; padding:10px; box-shadow:0 10px 24px rgba(42,27,51,0.10);
    transition:transform 0.2s ease;
  }
  .tiktok-card:nth-child(1){transform:rotate(-2deg);}
  .tiktok-card:nth-child(2){transform:rotate(1.5deg);}
  .tiktok-card:nth-child(3){transform:rotate(-1.5deg);}
  .tiktok-card:nth-child(4){transform:rotate(2deg);}
  .tiktok-card:hover{transform:scale(1.03) rotate(0deg); z-index:2;}
  .tiktok-thumb{
    aspect-ratio:9/16; border-radius:10px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .tiktok-thumb .play{
    width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,0.92);
    display:flex; align-items:center; justify-content:center; color:var(--plum); font-size:16px;
  }
  .tiktok-thumb .addphoto{
    position:absolute; bottom:32px; left:0; right:0; text-align:center;
    color:rgba(255,255,255,0.85); font-size:10px; font-weight:600;
  }
  .tiktok-thumb .views{
    position:absolute; bottom:10px; left:10px; background:rgba(42,27,51,0.65); color:#fff;
    font-size:10px; padding:4px 9px; border-radius:100px;
  }
  .tiktok-cap{font-size:12px; font-weight:500; padding:10px 6px 4px; line-height:1.35;}
  .tiktok-follow{
    display:inline-flex; align-items:center; gap:8px; margin-top:26px;
    font-size:13px; font-weight:600; color:var(--plum); text-decoration:none;
  }

  /* ===== YOUTUBE VLOGS ===== */
  .yt-videos{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
  .yt-card{
    background:#fff; border-radius:16px; padding:10px; box-shadow:0 10px 24px rgba(42,27,51,0.10);
    transition:transform 0.2s ease;
  }
  .yt-card:nth-child(1){transform:rotate(-1.5deg);}
  .yt-card:nth-child(2){transform:rotate(1deg);}
  .yt-card:nth-child(3){transform:rotate(-1deg);}
  .yt-card:hover{transform:scale(1.03) rotate(0deg); z-index:2;}
  .yt-thumb{
    aspect-ratio:16/9; border-radius:10px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .yt-thumb .play{
    width:52px; height:36px; border-radius:8px; background:rgba(255,0,0,0.88);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px;
  }
  .yt-thumb .addphoto{
    position:absolute; bottom:10px; left:0; right:0; text-align:center;
    color:rgba(255,255,255,0.85); font-size:10px; font-weight:600;
  }
  .yt-thumb .views{
    position:absolute; top:10px; left:10px; background:rgba(42,27,51,0.65); color:#fff;
    font-size:10px; padding:4px 9px; border-radius:100px;
  }
  .yt-cap{font-size:12px; font-weight:600; padding:10px 6px 4px; line-height:1.35;}
  .yt-follow{
    display:inline-flex; align-items:center; gap:8px; margin-top:26px;
    font-size:13px; font-weight:600; color:var(--plum); text-decoration:none;
  }

  /* ===== LIVING IN MIAMI ===== */
  .miami-section{max-width:820px; margin:0 auto;}
  .miami-eyebrow{font-family:'Caveat', cursive; font-size:22px; color:var(--pink); font-weight:700; transform:rotate(-2deg); display:inline-block; margin-bottom:6px;}
  .miami-title{font-family:'Bricolage Grotesque', sans-serif; font-size:clamp(20px, 4.5vw, 38px); font-weight:800; color:var(--plum); margin-bottom:14px; line-height:1.15;}
  .miami-sub{font-size:15px; font-weight:500; line-height:1.7; opacity:0.8; max-width:520px; margin-bottom:20px;}
  .miami-photo{
    position:relative; width:100%; max-width:460px; aspect-ratio:16/9; border-radius:14px;
    background:repeating-linear-gradient(135deg, var(--turq), var(--turq) 12px, #2c99a8 12px, #2c99a8 24px);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .miami-photo .addphoto{color:rgba(255,255,255,0.9); font-size:12px; font-weight:600;}

  /* ===== SECTION ===== */
  .venue{margin-bottom:26px; display:flex; gap:18px; align-items:flex-start;}
  .venue-photo{width:170px; height:220px; object-fit:cover; border-radius:12px; flex-shrink:0;}
  .venue-text{flex:1;}
  .venue h3{font-family:'Bricolage Grotesque', sans-serif; font-size:17px; font-weight:800; margin-bottom:6px;}
  .venue h3 a{color:var(--pink); text-decoration:none; font-weight:800;}
  .venue p{font-size:14.5px; line-height:1.75; opacity:0.85; margin:0;}
  @media (max-width:600px){ .venue{flex-direction:column;} .venue-photo{width:100%; height:280px;} }
  .venue-placeholder{
    width:130px; height:130px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.85); font-size:10px; font-weight:600; text-align:center;
  }
  @media (max-width:600px){ .venue-placeholder{width:100%; height:160px;} }
  .post-photo-strip{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:20px 0 30px;}
  .post-photo-strip img{width:100%; height:180px; object-fit:cover; border-radius:10px;}
  @media (max-width:820px){ .post-photo-strip{grid-template-columns:1fr 1fr;} }
  .section{padding:40px 0;}
  .sec-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:30px; flex-wrap:wrap; gap:10px;}
  .sec-head h2{font-family:'Bricolage Grotesque', sans-serif; font-size:28px; font-weight:800;}
  .sec-head .sub{font-family:'Caveat', cursive; font-size:20px; color:var(--pink);}

  /* ===== POSTCARDS ===== */
  .cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:30px 26px; padding-top:10px;}
  .card{
    background:#fff; border-radius:16px; padding:12px; box-shadow:0 10px 24px rgba(42,27,51,0.10);
    transition:transform 0.2s ease;
  }
  .card:nth-child(1){transform:rotate(-2deg);}
  .card:nth-child(2){transform:rotate(1.5deg);}
  .card:nth-child(3){transform:rotate(-1deg);}
  .card:hover{transform:scale(1.03) rotate(0deg); z-index:2;}
  .card-photo{
    height:160px; border-radius:10px; position:relative; overflow:hidden;
  }
  .card-photo .badge{
    position:absolute; top:10px; left:10px; background:#fff; color:var(--plum);
    font-size:10px; font-weight:600; padding:5px 10px; border-radius:100px;
  }
  .card-body{padding:16px 8px 8px;}
  .card-body .kicker{font-size:11px; color:var(--pink); font-weight:600; text-transform:uppercase; letter-spacing:0.04em;}
  .card-body h3{font-family:'Bricolage Grotesque', sans-serif; font-size:18px; font-weight:700; line-height:1.3; margin:8px 0 10px;}
  .card-body .meta{font-size:12px; opacity:0.55; display:flex; justify-content:space-between;}

  /* ===== CATEGORY TAPES ===== */
  .cats{display:flex; gap:14px; flex-wrap:wrap;}
  .cat{
    padding:12px 22px; border-radius:6px; font-weight:600; font-size:14px; color:var(--plum);
  }
  .cat:nth-child(1){background:var(--yellow); transform:rotate(-2deg);}
  .cat:nth-child(2){background:var(--turq); color:#fff; transform:rotate(1.5deg);}
  .cat:nth-child(3){background:var(--pink); color:#fff; transform:rotate(-1deg);}
  .cat:nth-child(4){background:#fff; border:2px solid var(--plum); transform:rotate(2deg);}

  /* ===== ABOUT ===== */
  .about{
    display:grid; grid-template-columns:0.3fr 1.7fr; gap:20px; align-items:center;
    padding:20px 0;
  }
  .about-collage{position:relative; width:100%; max-width:50px; height:41px; margin:0 auto; justify-self:start;}
  .about-collage .photo{
    position:relative; width:100%; height:100%; border-radius:12px; background:#fff; padding:12px 12px 28px;
    box-shadow:0 14px 28px rgba(42,27,51,0.16); transform:rotate(-1.5deg);
  }
  .about-collage .a1 .frame{background:repeating-linear-gradient(135deg, var(--pink), var(--pink) 10px, #e2456a 10px, #e2456a 20px); width:100%; height:100%; border-radius:4px;}
  .about h2{font-family:'Bricolage Grotesque', sans-serif; font-size:26px; font-weight:800; margin-bottom:14px;}
  .about-stack{max-width:820px; width:100%; margin:0 auto;}
  .about-title-above{font-family:'Bricolage Grotesque', sans-serif; font-size:clamp(15px, 4.2vw, 36px); font-weight:800; color:var(--plum); margin-bottom:18px; line-height:1.15; white-space:nowrap;}
  .about-photo-wrap{position:relative; max-width:460px;}
  .about-heart-outline{position:absolute; width:110px; height:auto; right:-25px; top:-25px; z-index:0; transform:rotate(15deg);}
  .about-photo-block{position:relative; width:100%; max-width:460px; margin:0; aspect-ratio:800/657; border-radius:14px; overflow:hidden; z-index:1;}
  .about-photo-img{position:absolute; inset:0;}
  .about-text-below{margin-top:20px; max-width:460px; text-align:left;}
  .about-text-below p{font-family:'Bricolage Grotesque', sans-serif; font-size:21px; font-weight:800; line-height:1.4; opacity:0.9; margin-bottom:16px;}

  .about p{font-size:14px; line-height:1.7; opacity:0.75; margin-bottom:18px;}
  .about a{font-weight:600; color:var(--pink); text-decoration:none;}

  footer{
    margin-top:20px; padding:32px 0 50px; display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap; gap:16px;
  }
  footer .tag{font-family:'Caveat', cursive; font-size:18px;}
  footer .socials{display:flex; gap:20px; font-size:13px;}
  footer .socials a{color:var(--plum); text-decoration:none; font-weight:500; opacity:0.8;}

  @media (max-width:820px){
    .top-photo{height:520px;}
    .headline-on-photo{left:24px; right:24px; bottom:28px;}
    .headline-on-photo h1{font-size:32px;}
    .polaroid, .tape{display:none;}
    .cards{grid-template-columns:1fr;}
    .tiktoks{grid-template-columns:repeat(2, 1fr);}
    .yt-videos{grid-template-columns:1fr;}
    .about{grid-template-columns:1fr;}
    .about-collage{height:auto; aspect-ratio:800/657; max-width:100%; margin:0 auto 10px;}
  }

  @media (max-width:680px){
    nav{flex-direction:column; gap:16px; padding:22px 20px; align-items:center; text-align:center;}
    .logo{font-size:19px;}
    .nav-links{gap:20px; flex-wrap:wrap; justify-content:center;}
    .nav-cta{padding:9px 20px; font-size:12px;}
  }