/* Shared responsive finishing touches */
img, video { max-width:100%; }

/* Main page: keep the hero and navigation balanced on laptops/tablets. */
@media (max-width: 1040px) {
  .nav, .section, .contact, footer, .hero { padding-left:28px; padding-right:28px; }
  .nav { gap:18px; }
  .nav-actions { gap:13px; }
  .nav-actions a { font-size:.74rem; }
  .hero { min-height:600px; }
  .hero-photo { right:5%; }
}

@media (max-width: 860px) {
  .hero { min-height:650px; padding-top:68px; }
  h1 { max-width:620px; }
  .hero-photo { width:210px; height:288px; right:4%; bottom:48px; }
  .orbit-one { width:240px; height:240px; right:-50px; top:250px; }
  .orbit-two { right:25%; top:222px; }
  .hero-star { right:26%; top:270px; }
  .section-heading { gap:35px; }
  .goal-photo { right:6%; }
}

@media (max-width: 720px) {
  .nav { position:sticky; top:0; z-index:20; background:rgba(246,241,232,.94); backdrop-filter:blur(10px); }
  .nav-actions { max-width:calc(100vw - 116px); }
  .hero { min-height:610px; }
  .hero h1 { max-width:100%; font-size:clamp(3.25rem,14vw,4.9rem); }
  .hero .intro { max-width:270px; }
  .hero-photo { z-index:1; }
  .cards { grid-template-columns:1fr; }
  .card { min-height:255px; }
  .section-heading > *, .skills-layout > * { min-width:0; }
  .skill-list > div { grid-template-columns:34px minmax(0,1fr); }
  .goal-panel { overflow:hidden; }
  .goal-panel blockquote { max-width:95%; }
}

@media (max-width: 390px) {
  .nav { padding-left:14px; padding-right:14px; }
  .brand { font-size:.95rem; }
  .nav-actions { max-width:calc(100vw - 100px); gap:12px; }
  .hero, .section, .contact, footer { padding-left:16px; padding-right:16px; }
  .hero { padding-top:48px; }
  .hero h1 { font-size:3.1rem; }
  .hero-photo { width:125px; height:178px; right:16px; bottom:22px; }
  .button { padding:12px 16px; }
  .contact-links a { overflow-wrap:anywhere; }
}

/* Cat Corner: avoid tiny four-column photos and a squeezed vertical video. */
@media (max-width: 920px) {
  .gallery { grid-template-columns:1fr 1fr; max-width:680px; }
  .photo.one, .photo.three { height:350px; }
  .photo.two { height:260px; margin-top:60px; }
  .photo.four { height:245px; margin-top:80px; }
  .video-card { flex-direction:column; align-items:center; text-align:center; }
}

@media (max-width: 540px) {
  header { min-height:355px; }
  .video-card { padding:24px; }
  .video-frame { width:min(270px, 100%); }
  .gallery { gap:10px; }
  .photo.one, .photo.three { height:235px; }
  .photo.two { height:175px; margin-top:35px; }
  .photo.four { height:165px; margin-top:34px; }
}