@media screen and (max-width: 1400px) {
  #profile {
    height: 83vh;
    margin-bottom: 6rem;
  }
  .about-containers {
    flex-wrap: wrap;
  }
  #contact,
  #projects {
    height: fit-content;
  }
}

@media screen and (max-width: 1200px) {
  #desktop-nav {
    display: none;
  }
  #hamburger-nav {
    display: flex;
  }
  #experience,
  .experience-details-container {
    margin-top: 2rem;
  }
  #profile,
  .section-container {
    display: block;
  }
  .arrow {
    display: none;
  }
  section,
  .section-container {
    height: fit-content;
  }
  section {
    margin: 0 5%;
  }
  .section__pic-container {
    width: 275px;
    height: 275px;
    margin: 0 auto 2rem;
  }
  /* Slightly smaller hero image on medium screens */
  #profile .section__pic-container {
    width: 250px;
    height: 250px;
  }
  .about-containers {
    margin-top: 0;
  }
}

@media screen and (max-width: 600px) {
  #contact,
  footer {
    height: 40vh;
  }
  #profile {
    height: 83vh;
    margin-bottom: 0;
  }
  article {
    font-size: 1rem;
  }
  footer nav {
    height: fit-content;
    margin-bottom: 2rem;
  }
  .about-containers,
  .contact-info-upper-container,
  .btn-container {
    flex-wrap: wrap;
  }
  .contact-info-container {
    margin: 0;
  }
  .contact-info-container p,
  .nav-links li a {
    font-size: 1rem;
  }
  .experience-sub-title {
    font-size: 1.25rem;
  }
  .logo {
    font-size: 1.5rem;
  }
  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .section__pic-container {
    width: auto;
    height: 46vw;
    justify-content: center;
  }
  /* Slightly smaller hero image on small screens */
  #profile .section__pic-container {
    height: 42vw;
  }
  .section__text__p2 {
    font-size: 1.25rem;
  }
  .title {
    font-size: 2rem;
  }
  .text-container {
    text-align: justify;
  }
}

/* Additional mobile-first improvements: keep desktop unchanged, only affect narrow screens */
@media screen and (max-width: 480px) {
  /* Make main sections flow naturally (no fixed heights) */
  section {
    padding-top: 3.2rem;
    margin: 0 4% !important;
    height: auto !important;
  }

  /* Nav: ensure hamburger nav occupies full width and links are easy to tap */
  #hamburger-nav {
    width: calc(100% - 2rem);
    margin: 0.6rem auto;
    padding: 0.5rem 0.75rem;
  }
  .hamburger-icon { width: 36px; height: 28px; }
  .hamburger-icon span { height: 3px; }
  .menu-links { right: 0; left: 0; width: 100%; border-radius: 12px; }
  .menu-links a { padding: 14px 12px; font-size: 1.05rem; }

  /* Profile: stack picture above text and make image responsive */
  #profile { display: block; gap: 1rem; padding-bottom: 0.6rem; }
  .section__pic-container { width: 46vw; height: 46vw; margin: 0.5rem auto; }
  #profile .section__pic-container { width: 46vw; height: 46vw; }
  
  /* Don't completely remove the menu from layout — let JS toggle the "open" class
     (which animates max-height in `style.css`) so the hamburger can open it.
     Use opacity + max-height here to keep the menu hidden by default on very
     small screens while still allowing `.menu-links.open` to reveal it. */
  /* Remove the header menu on very small screens — keep only the hamburger and
     theme switch visible. This is mobile-only and will not affect desktop. */
  .menu-links { display: none !important; }
  /* Also hide the hamburger "three-line" icon on mobile preview as requested
    so only the theme switch (or other header elements) remain. Desktop
    hamburger stays unchanged. */
  .hamburger-icon { display: none !important; }

  /* Prevent a right-side gap on very small screens: avoid horizontal overflow
     and ensure sections (including the hero `#profile`) use the full viewport
     width. This only applies to very small devices and doesn't affect desktop. */
  html, body, #profile { overflow-x: hidden; }

  section {
    margin: 0 !important;
    padding-left: 4%;
    padding-right: 4%;
    width: 100%;
    box-sizing: border-box;
    height: auto !important;
  }

  /* Make the mobile header stretch edge-to-edge to avoid an extra right margin */
  #hamburger-nav { width: 100% !important; margin: 0.6rem 0 !important; }

  
  /* Ensure mobile theme switch is visible and aligned in the header */
  #hamburger-nav .theme-switch.mobile { display: inline-flex; align-items: center; margin-left: 0.6rem; }
  /* Match desktop switch size and thumb for consistent look/behavior on mobile */
  #hamburger-nav .theme-switch.mobile .switch { width: 68px !important; height: 36px !important; }
  #hamburger-nav .theme-switch.mobile .switch-track { border-radius: 999px; }
  #hamburger-nav .theme-switch.mobile .switch-thumb { width: 30px !important; height: 30px !important; top: 3px !important; left: 3px !important; }
  #hamburger-nav .theme-switch.mobile .switch-icons { padding: 0 10px !important; font-size: 16px !important; }
  /* Ensure the checked state matches desktop translate distance */
  #hamburger-nav .theme-switch.mobile input:checked + .switch .switch-thumb { transform: translateX(32px) !important; }
  /* Focus ring consistent with desktop */
  #hamburger-nav .theme-switch.mobile input:focus-visible + .switch::after { box-shadow: 0 0 0 3px rgba(239,68,68,0.35) !important; }

  /* Ensure the moon and sun icons appear in the mobile switch like the web version.
     Desktop HTML already includes .icon-moon and .icon-sun inside the switch-icons;
     for mobile, force them visible and provide emoji fallback if needed. */
  #hamburger-nav .theme-switch.mobile .icon-moon,
  #hamburger-nav .theme-switch.mobile .icon-sun {
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }
  /* Provide emoji fallback content if icon spans are empty in the mobile theme switch */
  #hamburger-nav .theme-switch.mobile .icon-moon:empty::before { content: "🌙"; }
  #hamburger-nav .theme-switch.mobile .icon-sun:empty::before { content: "☀️"; }

  /* Shift the header name slightly to the right on mobile (0.5cm) without
    affecting desktop. This nudges the `.logo-cursive` inside the hamburger
    nav only. */
  #hamburger-nav .logo .logo-cursive { display: inline-block; transform: translateX(0.5cm); }
  /* Mobile-only: nudge circular hero image slightly upwards so it sits closer to the title */
  #profile .section__pic-container { transform: translateY(-6vw); }
  .section__text { padding: 0 0.25rem; text-align: center; }
  .hero-bio { max-width: 100%; font-size: 0.95rem; line-height: 1.5; margin: 0.75rem auto; }
  .title { font-size: 1.9rem; }

  /* Reduce spacing on About and Projects; stack columns vertically */
  .section-container, .about-containers, .about-lists, .experience-details-container { display: block; gap: 0.6rem; }
  /* Mobile-only: make the experience and education lists flow as a single column
    and explicitly ensure the education block appears after the experience
    list (so it will sit below the "IT Support / Freelance / Remote" item).
    This avoids touching the HTML and leaves desktop layout unchanged. */
  .about-lists { display: flex; flex-direction: column; gap: 0.6rem; }
  .about-experience-extra { order: 1; width: 100%; }
  .about-education-extra { order: 2; width: 100%; margin-top: 0.25rem; }
  /* Ensure headings and their corresponding lists appear in the correct
     interleaved order on very small screens without changing the HTML.
     We temporarily flatten the two wrapper elements so their children can
     be re-ordered visually: Experience heading, Experience list, Education
     heading, Education list. This only applies inside #about on narrow
     screens. */
  #about .about-details-container { display: flex; flex-direction: column; gap: 0.6rem; }
  /* Flatten wrappers so their children become direct children of
     .about-details-container, allowing explicit ordering below */
  #about .about-containers,
  #about .about-lists { display: contents; }

  /* Re-order flattened children so headings sit immediately before their lists */
  #about .about-details-container > .details-container:nth-of-type(1) { order: 1; }
  #about .about-details-container > .about-experience-extra { order: 2; margin-top: 0; }
  #about .about-details-container > .details-container:nth-of-type(2) { order: 3; }
  #about .about-details-container > .about-education-extra { order: 4; margin-top: 0.35rem; }

  /* Mobile-only: ensure the summary paragraph appears after the
     Experience and Education lists (keeps desktop ordering unchanged). */
  #about .about-summary {
    order: 5;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.6rem;
  }

  /* Re-apply the mobile heading card styles to the now-direct .details-container
     children (previously targeted via #about .about-containers .details-container) */
  #about .about-details-container > .details-container {
    position: relative;
    background: linear-gradient(90deg, rgba(185,28,28,0.96), rgba(239,68,68,0.92));
    border: 1px solid rgba(0,0,0,0.06);
     padding: 1.1rem 1.2rem;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.12);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
  }
  /* Make the heading cards visually narrower on small phones so their
     colorful background doesn't span the full viewport. Keep desktop same. */
  #about .about-containers .details-container {
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
  }
  #about .about-details-container > .details-container::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 18%;
    bottom: 18%;
    width: 6px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.35));
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    opacity: 0.95;
  }
  #about .about-details-container > .details-container h3 {
    margin: 0 0 0 0.6rem; /* leave space for the accent bar */
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.18);
    letter-spacing: 0.2px;
  }

  /* Ensure the lists take full width and keep spacing comfortable */
  #about .about-details-container > .about-experience-extra,
  #about .about-details-container > .about-education-extra { width: 100%; }
  #about .about-details-container .about-list { padding-left: 0; margin: 0.35rem 0 0 0; }
  /* Make the lists visually appear inside the heading cards on mobile by
     applying the same background, padding, and border-radius. This makes the
     list items look like they're contained within the Experience/Education
     blocks without changing the HTML structure used for desktop. */
  #about .about-details-container > .about-experience-extra,
  #about .about-details-container > .about-education-extra {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border-radius: 12px;
    padding: 0.75rem 0.9rem 0.9rem 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    margin-top: 0.4rem;
  }
  /* Ensure list items align visually with the card styling */
  #about .about-details-container .about-list li { margin: 0.32rem 0; font-size: 0.94rem; line-height: 1.35; }
  #about .about-details-container .about-role { font-weight: 700; color: var(--muted); font-size: 0.95rem; }
  #about .about-details-container .about-company { font-weight: 600; font-size: 0.92rem; }
  #about .about-details-container .about-meta { font-size: 0.82rem; color: rgba(255,255,255,0.82); }
  /* Ensure section heading containers remain visible on mobile so Projects
    and Research (which also use `.about-containers`) render correctly. */
  .about-pic { width: 100%; height: auto; border-radius: 12px; }
  .about-list { padding-left: 0; }

  /* Mobile: emphasize the Experience / Education heading block inside About
     by giving the two header cards a visible background, padding, and larger
     text so they read clearly on small screens. This only affects #about. */
  #about .about-containers {
    /* keep spacing but avoid resetting display so display:contents remains effective */
    gap: 0.6rem;
    align-items: stretch;
  }
  /* Strong heading card for mobile: visible gradient, left accent bar, larger white text */
  #about .about-containers .details-container {
    position: relative;
    background: linear-gradient(90deg, rgba(185,28,28,0.96), rgba(239,68,68,0.92));
    border: 1px solid rgba(0,0,0,0.06);
     padding: 0.6rem 0.75rem; /* compact on mobile */
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
    margin-bottom: 0.45rem;
  }
  #about .about-containers .details-container::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 18%;
    bottom: 18%;
    width: 6px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.35));
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    opacity: 0.95;
  }
  #about .about-containers .details-container h3 {
    margin: 0 0 0 0.5rem; /* leave space for the accent bar */
    font-size: 1.05rem; /* smaller heading on mobile */
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.18);
    letter-spacing: 0.2px;
  }

  /* Project cards: make them full width and reduce image height */
  #projects .about-containers { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
  #projects .project-card { max-width: 100%; width: 100%; min-height: auto; }
  #projects .project-card .project-img { height: 160px; object-fit: cover; }
  .project-title { font-size: 1rem; }
  .btn { padding: 0.6rem; width: auto; }

  /* Mobile improvements for Projects: ensure images are responsive and content doesn't overflow */
  #projects .project-card { padding: 0.6rem; }
  #projects .project-card .project-img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; }
  #projects .project-card .btn-container { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; }

  /* Research: move prev/next arrows inside the research card on mobile to avoid overflow */
  #research .details-container { padding: 0.4rem; }
  #research .research-prev, #research .research-next {
    position: absolute;
    top: 10px;
    transform: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    background: var(--card);
    color: var(--primary);
  }
  #research .research-prev { left: 12px; }
  #research .research-next { right: 12px; }
  /* Make the research figure stack vertically and center on narrow screens */
  #research .landscape-paper { flex-direction: column; align-items: center; }
  .paper-caption { text-align: center; }

  /* Certification carousel: cap image heights for small screens */
  .cert-row { gap: 0.6rem; }
  .cert-item { flex: 0 0 70%; }
  .cert-item img { max-height: 220px; }

  /* Videos & graphics: make arrows sit inside the card to avoid overflow */
  .graphics-prev, .graphics-next, .video-controls .video-prev, .video-controls .video-next { left: 8px; right: 8px; position: absolute; transform: translateY(-50%); }
  .graphics-prev { left: 8px; }
  .graphics-next { right: 8px; }

  /* Research modal: make iframe full width/height within modal on small screens */
  .modal-content { width: 96%; height: 86vh; }
  #pdf-preview-frame { height: calc(86vh - 72px); }

  /* Contact: stack contact items and increase tap target */
  .contact-info-upper-container { flex-direction: column; padding: 0.6rem; gap: 0.6rem; }
  .contact-info-container { width: 100%; justify-content: flex-start; padding-left: 0.6rem; }
  .contact-info-container p { font-size: 1rem; }

  /* Reduce heavy background/padding used on desktop headers so mobile feels lighter */
  #desktop-nav { display: none !important; }

  /* Footer and copyright spacing */
  .site-copyright { margin: 0.6rem auto 1rem; font-size: 0.9rem; }
}

/* Mobile light-mode: force Experience/Education text to white for small screens only */
@media screen and (max-width: 480px) {
  html:not([data-theme="dark"]) #about .about-containers .details-container h3,
  html:not([data-theme="dark"]) #about .about-details-container .about-list li,
  html:not([data-theme="dark"]) .mobile-experience-card h3,
  html:not([data-theme="dark"]) .mobile-education-card h3,
  html:not([data-theme="dark"]) .mobile-experience-list .mobile-role,
  html:not([data-theme="dark"]) .mobile-education-list .mobile-role {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
  }
}

/* Show the condensed mobile Experience block and style it */
@media screen and (max-width: 480px) {
  .mobile-condensed-experience { display: block !important; width: 92%; margin: 0.6rem auto 0.8rem auto; }
  /* Match header background: default translucent gradient and light-theme solid gradient */
  .mobile-experience-card {
    background: linear-gradient(135deg, rgba(239,68,68,0.26) 0%, rgba(185,28,28,0.16) 44%, rgba(0,0,0,0.10) 100%);
    color: #fff;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border: 1px solid var(--card-border);
    text-align: center; /* center the content on mobile */
  }
  /* Light theme: stronger solid header gradient */
  html:not([data-theme="dark"]) .mobile-experience-card {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 45%, #b91c1c 75%, #dc2626 100%);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
  }
  .mobile-experience-card h3 {
    margin: 0 0 0.4rem 0;
    font-size: 1.6rem; /* match mobile-friendly size used for Education */
    text-align: center;
    font-weight: 700;
    /* Use same gradient text treatment as .title (mobile-only) */
    background: linear-gradient(90deg, var(--text), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Stack each entry: Role (bold) / Company / Location, and add a blank line between entries */
  .mobile-experience-list p {
    margin: 0 0 1.1rem 0; /* larger bottom gap to create a visible blank line between entries */
    color: rgba(255,255,255,0.95);
    font-size: 0.95rem;
    line-height: 1.28; /* slightly tighter so company/location sit closer */
  }
  .mobile-experience-list strong {
    display: block; /* force role onto its own line */
    font-weight: 800; /* stronger bold for the role */
    margin-bottom: 0.08rem; /* reduce gap under role so company sits higher */
    color: #fff;
  }

  /* New structured mobile entry styles for better visual rhythm */
  .mobile-experience-list .mobile-entry {
    padding: 0.6rem 0.45rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    margin-bottom: 0.9rem; /* visible blank line between entries */
    text-align: center; /* ensure inner text is centered */
  }
  .mobile-experience-list .mobile-role {
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.08rem;
    font-size: 1.08rem; /* slightly bigger */
    line-height: 1.12;
  }
  .mobile-experience-list .mobile-company {
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin-bottom: 0.06rem;
    font-size: 1rem; /* slightly bigger */
  }
  .mobile-experience-list .mobile-location {
    font-size: 0.92rem; /* slightly bigger */
    color: rgba(255,255,255,0.86);
  }
  /* Make mobile education entries match the experience styles */
  .mobile-education-list .mobile-entry { padding: 0.6rem 0.45rem; border-radius: 8px; background: rgba(255,255,255,0.02); margin-bottom: 0.9rem; text-align: center; }
  .mobile-education-list .mobile-role { font-weight: 800; color: #fff; margin-bottom: 0.08rem; font-size: 1.08rem; line-height: 1.12; }
  .mobile-education-list .mobile-company { font-weight: 700; color: rgba(255,255,255,0.95); margin-bottom: 0.06rem; font-size: 1rem; }
  .mobile-education-list .mobile-location { font-size: 0.92rem; color: rgba(255,255,255,0.86); }
}

/* Mobile condensed education block: mirror the Experience card styling and show only on small screens */
@media screen and (max-width: 480px) {
  .mobile-condensed-education { display: block !important; width: 92%; margin: 0.6rem auto 0.8rem auto; }
  .mobile-education-card {
    background: linear-gradient(135deg, rgba(239,68,68,0.26) 0%, rgba(185,28,28,0.16) 44%, rgba(0,0,0,0.10) 100%);
    color: #fff;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border: 1px solid var(--card-border);
  }
  html:not([data-theme="dark"]) .mobile-education-card {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 45%, #b91c1c 75%, #dc2626 100%);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
  }
  .mobile-education-card h3 {
    margin: 0 0 0.4rem 0;
    font-size: 1.6rem; /* mobile-friendly size matching About title styling */
    text-align: center;
    font-weight: 700;
    /* Use same gradient text treatment as .title (mobile-only) */
    background: linear-gradient(90deg, var(--text), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .mobile-education-list p { margin: 0.48rem 0; color: rgba(255,255,255,0.95); font-size: 0.95rem; line-height: 1.35; }
  .mobile-education-list strong { display:block; font-weight:700; margin-bottom: 0.15rem; color: #fff; }
}

/* Final mobile-only About refinements (kept separate for easy tuning) */
@media screen and (max-width: 480px) {
  /* Slightly increase overall vertical rhythm for About */
  #about { padding-top: 0.6rem; padding-bottom: 0.8rem; }

  /* Move Research section down a bit on very small screens so it sits
    further from the previous divider (mobile-only) */
  #research { margin-top: 2.4cm; }

  /* Profile pic: slightly smaller, centered, softer corners */
  #about .section__pic-container { width: 40vw; height: 40vw; margin: 0.6rem auto; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
  #about .about-pic { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Text area: comfortable padding and readable line-height */
  #about .section__text { padding: 0 0.6rem; text-align: left; }
  #about .about-summary { font-size: 1rem; line-height: 1.65; color: var(--muted); background: transparent; padding: 0.4rem 0; margin-top: 0.6rem; }

  /* Make heading cards compact and centered */
  #about .about-containers .details-container { max-width: 88%; margin: 0 auto 0.5rem auto; padding: 0.5rem 0.65rem; border-radius: 12px; }
  #about .about-containers .details-container h3 { font-size: 1.02rem; margin-left: 0.5rem; }

  /* Tighten lists inside cards */
  #about .about-details-container .about-list { margin-top: 0.25rem; padding-left: 0; }
  #about .about-details-container .about-list li { margin: 0.22rem 0; font-size: 0.94rem; }

  /* Ensure spacing between sections is even */
  #about .about-details-container > .about-experience-extra { margin-top: 0.12rem; }
  #about .about-details-container > .about-education-extra { margin-top: 0.28rem; }
  
  /* Hide only the original Experience/Education lists on very small screens.
    Keep the main `.about-details-container` so mobile-only condensed blocks
    (in the HTML) can render. */
  #about .about-containers,
  #about .about-lists,
  #about .about-experience-extra,
  #about .about-education-extra { display: none !important; }
}

/* Make skills blocks slightly smaller on narrow mobile screens without affecting desktop */
@media screen and (max-width: 480px) {
  /* smaller skill chips: reduce padding, font-size, and gap */
  .skills-chips { gap: 0.4rem 0.4rem; }
  .skill-chip {
    padding: 0.25rem 0.45rem !important;
    font-size: 0.82rem !important;
    border-radius: 999px;
  }

  /* skills list: tighter spacing and smaller bullet */
  .skills-list { gap: 0.35rem; margin-top: 0.2rem; }
  .skills-list li { padding-left: 1rem; line-height: 1.45; font-size: 0.92rem; }
  .skills-list li::before { width: 7px; height: 7px; top: 0.6em; }
}

/* Very small phones: tighten fonts and spacing further */
@media screen and (max-width: 360px) {
  .menu-links a { font-size: 1rem; padding: 12px 10px; }
  .title { font-size: 1.6rem; }
  .hero-greeting-stylish { font-size: 1.5rem; }
  .hero-bio { font-size: 0.9rem; line-height: 1.45; }
  .project-title { font-size: 0.95rem; }
  .cert-item { flex: 0 0 82%; }
  /* Slightly increase upward nudge on very small phones */
  #profile .section__pic-container { transform: translateY(-8vw); }
}