/* ==========================================================================
   queries.css — responsive overrides only
   Strategy:
   - All breakpoints use max-width so smaller sizes inherit tighter rules.
   - Scale nav size/padding/fonts; keep --nav-w in sync.
   - Footer clock becomes fluid and never overflows.
   - Stack multi-column rows and grids on small screens.
   ========================================================================== */

/* Safety: prevent horizontal scroll at all sizes */
html,
body {
  max-width: 100%;
  /* overflow-x: hidden; */
}

/* ========================= 1920px (18" class) ============================ */
@media only screen and (max-width: 1920px) {
  :root {
    --nav-w: 29%;
    --h-feature: auto;
    --h-ai: auto;
    --h-dsa: auto;
    --h-prj: auto;
  }

  /* Nav scale */
  nav {
    height: 3.5rem;
  }
  .main-nav-list {
    gap: 1.2rem;
  }
  .main-nav-link:link {
    font-size: 1.1rem;
    padding: 6px 16px;
  }
}

/* ========================= 1728px (16" MacBook Pro) ====================== */
@media only screen and (max-width: 1728px) {
  :root {
    --nav-w: 32.5%;
  }
}

/* ========================= 1512px (14" MacBook Pro) ====================== */
@media only screen and (max-width: 1512px) {
  :root {
    --nav-w: 36%;
  }

  /* Nav tighten slightly */
  .main-nav-list {
    /* gap: 1rem; */
  }
  .main-nav-link:link {
    font-size: 1.05rem;
    padding: 6px 14px;
  }
  .nav-slash {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  /* Feature/AI/DSA card heights a bit shorter by default */
  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 30rem;
  }

  .prj-gallery {
    margin-top: -2.2%;
  }

  /* Projects grid width */
  .prj-grid {
    width: 75rem;
  }

  .notes-box-text {
    padding-top: 2rem;
    font-size: 1.2rem;
    width: 32%;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 20rem;
    margin-left: 17rem;
    height: 30rem;
    width: 22rem;
  }

  .img-about-box img {
    width: auto;
    height: 30rem;
  }

  .about-box {
    margin-top: 35%;
    margin-left: -2rem;
  }

  /* EXPERIENCE */

  .exp-box-one {
    width: 30rem;
    transform: translateX(58rem);
  }
  .exp-box-two {
    width: 40rem;
    transform: translateX(40rem);
  }
  .exp-box-three {
    width: 45rem;
    transform: translateX(26rem);
  }
  .exp-box-four {
    width: 30rem;
    transform: translateX(16rem);
  }
  .exp-box-five {
    width: 22rem;
    transform: translateX(6rem);
  }

  /* ---------- FOOTER ---------- */

  .quote-box {
    margin-left: 6rem;
    margin-right: -1rem;
  }

  .quote,
  .quote-two {
    font-size: 3.4rem;
  }

  .quote {
    margin-left: 3rem;
  }

  .quote-two {
    margin-left: 8rem;
  }
}

/* ========================= 1440px (15" class) ============================ */
@media only screen and (max-width: 1440px) {
  :root {
    --nav-w: 38%;
  }

  /* Nav */
  /* .main-nav-link:link {
    font-size: 1rem;
    padding: 6px 12px;
  }
  .main-nav-list {
    gap: 0.9rem;
  } */

  .notes-box-text {
    width: 34%;
  }

  /* Quotes/footers scale down a notch */
  .quote,
  .quote-two {
    font-size: clamp(2rem, 2.2rem + 1.2vw, 4rem);
  }
  .fa-solid {
    font-size: 5.5rem;
  }

  /* Projects */
  .prj-img {
    height: 32rem;
  }

  .dsa-img {
    height: 40rem;
    width: auto;
  }
}

/* ========================= 1280px (13" MacBook / Air) ==================== */
@media only screen and (max-width: 1280px) {
  :root {
    --nav-w: 42.5%;
  }

  /* Nav pill + hit areas */
  /* .main-nav-link:link {
    font-size: 0.98rem;
    padding: 6px 12px;
  }
  .main-nav-list {
    gap: 0.8rem;
  } */

  /* Hero paragraph a little narrower */
  .heading-primary-sub-two {
    font-size: 1.1rem;
  }

  .quote,
  .quote-two {
    font-size: clamp(2rem, 2rem + 1.2vw, 4rem);
  }

  .quote {
    margin-left: 2rem;
  }

  .quote-two {
    margin-left: 5rem;
  }

  .fa-solid {
    font-size: 5rem;
  }

  .meaning {
    font-size: 1.2rem;
  }

  /* Feature cards */
  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 26rem;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 18rem;
    margin-left: 12rem;
    height: 30rem;
    width: 22rem;
  }

  .img-about-box img {
    width: auto;
    height: 30rem;
  }

  .about-box {
    margin-top: 36%;
    margin-left: -2rem;
  }

  /* EXPERIENCE */

  .exp-box-one {
    width: 28rem;
    transform: translateX(47rem);
  }
  .exp-box-two {
    width: 36rem;
    transform: translateX(32rem);
  }
  .exp-box-three {
    width: 40rem;
    transform: translateX(20rem);
  }
  .exp-box-four {
    width: 28rem;
    transform: translateX(12rem);
  }
  .exp-box-five {
    width: 22rem;
    transform: translateX(4rem);
  }

  .experience-role {
    font-size: 1.1rem;
  }

  .experience-meta {
    font-size: 0.9rem;
  }

  /* Duration badge (top-right inside the pill) */
  .dur {
    font-size: 1.3rem;
  }

  .story-box {
    width: 54%;
  }

  .about-box-text,
  .story-box-text {
    font-size: 1.2rem;
  }

  .notes-box-text {
    padding-top: 2.5rem;
    font-size: 1.2rem;
    width: 32%;
  }

  .numb-text {
    font-size: 1.1rem;
  }

  .abt-img-box-one img,
  .abt-img-box-two img {
    height: 24rem;
  }

  /* AI/DSA/Content images */
  .ai-img {
    height: 22rem;
  }
  .dsa-img {
    height: 35rem;
  }

  /* Projects */
  .prj-gallery {
    margin-top: -2.5%;
  }

  .prj-grid {
    width: 66rem;
    gap: 2.5rem;
  }
  .prj-img {
    height: 30rem;
  }
}

/* ========================= 1024px (tablet landscape) ===================== */
@media only screen and (max-width: 1024px) {
  :root {
    --nav-w: 53%;
  }

  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 22rem;
  }

  .feature-box img,
  .feature-box-two img,
  .feature-box-three img,
  .feature-box-four img {
    top: 8rem;
    left: 6rem;
  }

  .feature-box__text {
    font-size: 1rem;
    padding: 0rem 0rem;
  }

  .heading-tertiary {
    font-size: 2rem;
    top: 14%;
    right: 11%;
  }

  .heading-tertiary-two {
    font-size: 2rem;
    top: 14%;
    right: 6.5%;
  }

  .quote-box {
    margin-left: 5rem;
    /* margin-right: -1rem; */
  }

  .quote,
  .quote-two {
    font-size: clamp(2rem, 1.8rem + 1.2vw, 4rem);
  }

  .quote {
    margin-left: 0rem;
  }

  .quote-two {
    margin-left: 2rem;
  }

  .fa-solid {
    font-size: 4rem;
  }

  .meaning {
    font-size: 1rem;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 17rem;
    margin-left: 10rem;
    height: 30rem;
    width: 22rem;
  }

  .img-about-box img {
    width: auto;
    height: 25rem;
  }

  .about-box-head {
    font-size: 1.8rem;
  }

  .about-box-text {
    font-size: 0.6rem;
  }

  .about-box {
    margin-top: 42%;
    margin-left: 0rem;
  }

  /* EXPERIENCE */

  .exp-box-one {
    width: 22rem;
    transform: translateX(38rem);
  }
  .exp-box-two {
    width: 30rem;
    transform: translateX(22rem);
  }
  .exp-box-three {
    width: 32rem;
    transform: translateX(14rem);
  }
  .exp-box-four {
    width: 22rem;
    transform: translateX(8rem);
  }
  .exp-box-five {
    width: 18rem;
    transform: translateX(2rem);
  }

  .experience-role {
    font-size: 1.1rem;
  }

  .experience-meta {
    font-size: 0.9rem;
  }

  /* Duration badge (top-right inside the pill) */
  .dur {
    font-size: 1.3rem;
  }

  .story-box {
    width: 54%;
  }

  .about-box-text,
  .story-box-text {
    font-size: 1.2rem;
  }

  .notes-box-text {
    padding-top: 2.5rem;
    font-size: 1rem;
    width: 40%;
  }

  .numb-text {
    font-size: 1rem;
  }

  .numb-item-one,
  .numb-item-two {
    padding-top: 3.3rem;
  }

  .numb-item-one,
  .numb-item-three {
    padding-left: 3rem;
  }

  .numb-item-two,
  .numb-item-four {
    padding-right: 4rem;
  }

  .abt-img-box-one img,
  .abt-img-box-two img {
    height: 20rem;
    border-radius: 20px;
  }

  .dsa-text-box {
    width: 60ch;
  }

  .dsa-head {
    font-size: 1.5rem;
  }

  .dsa-box-para {
    font-size: 1rem;
  }

  .ai-img {
    height: 18rem;
  }
  .dsa-img {
    height: 30rem;
  }

  .con-img {
    height: 10rem;
  }

  /* Projects */
  .prj-gallery {
    margin-top: -3.5%;
  }

  .prj-grid {
    width: 85%;
    gap: 2.5rem;
  }
  .prj-img {
    height: 25rem;
  }
}

/* ========================= 900px (tablet portrait cap) =================== */
@media only screen and (max-width: 900px) {
  :root {
    --nav-w: 60%;
  }

  /* Switch rows to single column */
  /* .row {
    max-width: 50rem;
    padding: 0 2rem;
    display: block;
  }
  .row [class^="col-"] {
    width: 100% !important;
    float: none;
  }
  .row [class^="col-"]:not(:last-child) {
    margin-right: 0;
    margin-bottom: 3rem;
  } */

  .text-box {
    width: 100%;
  }

  .mode {
    right: 10%;
  }

  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 20rem;
  }

  .feature-box img,
  .feature-box-two img,
  .feature-box-three img,
  .feature-box-four img {
    top: 7rem;
    left: 4rem;
  }

  .feature-box__text {
    font-size: 0.9rem;
    padding: 0rem 0rem;
  }

  .heading-tertiary {
    font-size: 1.8rem;
    top: 14%;
    right: 12%;
  }

  .heading-tertiary-two {
    font-size: 2rem;
    top: 14%;
    right: 9%;
  }

  .quote-box {
    margin-left: 3rem;
    /* margin-right: -1rem; */
  }

  .quote,
  .quote-two {
    font-size: clamp(1rem, 1.8rem + 1.2vw, 4rem);
  }

  .quote {
    margin-left: 0rem;
  }

  .quote-two {
    margin-left: 2rem;
  }

  .fa-solid {
    font-size: 3rem;
  }

  .meaning {
    font-size: 1rem;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 17rem;
    margin-left: 8rem;
    height: 30rem;
    width: 22rem;
  }

  .img-about-box img {
    width: auto;
    height: 22rem;
  }

  .about-box-head {
    font-size: 1.5rem;
  }

  .about-box {
    margin-top: 50%;
    margin-left: 0rem;
  }

  .about-img {
    padding-top: 12rem;
    height: 30rem;
  }

  /* EXPERIENCE */

  .section-experience {
    padding-top: 0;
  }

  .exp-box-one {
    width: 22rem;
    transform: translateX(32rem);
  }
  .exp-box-two {
    width: 28rem;
    transform: translateX(22rem);
  }
  .exp-box-three {
    width: 28rem;
    transform: translateX(14rem);
  }
  .exp-box-four {
    width: 20rem;
    transform: translateX(8rem);
  }
  .exp-box-five {
    width: 18rem;
    transform: translateX(2rem);
  }

  .experience-role {
    font-size: 1.1rem;
  }

  .experience-meta {
    font-size: 0.9rem;
  }

  /* Duration badge (top-right inside the pill) */
  .dur {
    font-size: 1.3rem;
  }

  .story-box {
    width: 54%;
  }

  .about-box-text,
  .story-box-text {
    font-size: 1rem;
  }

  .notes-box-text {
    padding-top: 5rem;
    font-size: 1rem;
    width: 45%;
  }

  .numb-text {
    font-size: 0.9rem;
  }

  .numb-item-one,
  .numb-item-two {
    padding-top: 3.3rem;
  }

  .numb-item-one,
  .numb-item-three {
    padding-left: 3rem;
  }

  .numb-item-two,
  .numb-item-four {
    padding-right: 4rem;
  }

  .abt-img-box-one img,
  .abt-img-box-two img {
    height: 20rem;
    border-radius: 20px;
  }

  .dsa-text-box {
    width: 60ch;
  }

  .dsa-head {
    font-size: 1.5rem;
  }

  .dsa-box-para {
    font-size: 1rem;
  }

  .ai-img {
    height: 15rem;
  }
  .dsa-img {
    height: 25rem;
  }

  .con-img {
    height: 8rem;
  }

  .pro-con-img {
    height: 18rem;
  }

  .art-con-img {
    height: 18rem;
  }

  /* Projects */
  .prj-gallery {
    margin-top: -4.5%;
    padding-bottom: 5rem;
  }

  .prj-img {
    height: 20rem;
  }
}

/* ========================= 768px (small tablets) ========================= */

@media only screen and (max-width: 768px) {
  :root {
    --nav-w: 62%;
  }

  /* Nav: larger tap targets but lighter text */
  .main-nav-link:link {
    font-size: 0.95rem;
    padding: 6px 12px;
  }
  .main-nav-list {
    gap: 0.6rem;
  }

  .text-box {
    padding-top: 0;
  }

  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 18rem;
  }

  .feature-box__text {
    font-size: 0.9rem;
    padding: 0rem 0rem;
  }

  .heading-tertiary {
    font-size: 1.5rem;
    top: 14%;
    right: 12%;
  }

  .heading-tertiary-two {
    font-size: 1.5rem;
    top: 14%;
    right: 9%;
  }

  .quote-box {
    margin-left: 3rem;
    /* margin-right: -1rem; */
  }

  .quote,
  .quote-two {
    font-size: clamp(0.8rem, 1.3rem + 1.2vw, 4rem);
  }

  .quote {
    margin-left: 0rem;
  }

  .quote-two {
    margin-left: 2rem;
  }

  .fa-solid {
    font-size: 2.5rem;
  }

  .footer__item-clock {
    padding: 2px 8px;
  }

  .clock24 {
    font-size: 1rem;
  }

  .footer__link:link,
  .footer__link:visited {
    font-size: 1rem;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 17rem;
    margin-left: 6rem;
    height: 30rem;
    width: 22rem;
  }

  .img-about-box img {
    width: auto;
    height: 22rem;
  }

  .about-box-head {
    font-size: 1.3rem;
  }

  .about-box {
    margin-top: 55%;
    margin-left: 0rem;
  }

  .about-img {
    padding-top: 12rem;
    height: 30rem;
  }

  /* EXPERIENCE */

  .section-experience {
    padding-top: 0;
  }

  .exp-box-one {
    width: 22rem;
    transform: translateX(24rem);
  }
  .exp-box-two {
    width: 24rem;
    transform: translateX(15rem);
    margin-top: 0rem;
  }
  .exp-box-three {
    width: 22rem;
    transform: translateX(10rem);
    margin-top: 0rem;
  }
  .exp-box-four {
    width: 20rem;
    transform: translateX(6rem);
    margin-top: 0rem;
  }
  .exp-box-five {
    width: 18rem;
    transform: translateX(2rem);
    margin-top: 0rem;
  }

  .experience-role {
    font-size: 1.1rem;
  }

  .experience-meta {
    font-size: 0.9rem;
  }

  /* Duration badge (top-right inside the pill) */
  .dur {
    font-size: 1.3rem;
  }

  .notes-box-text {
    padding-top: 6rem;
    font-size: 1rem;
    width: 55%;
  }

  .story-box {
    width: 65%;
  }

  .interest-box {
    height: 70rem;
  }

  .numb-text {
    font-size: 0.9rem;
  }

  .numb-item-one,
  .numb-item-two,
  .numb-item-three,
  .numb-item-four {
    padding-right: 0;
  }

  .numb-item-one,
  .numb-item-three {
    padding-left: 2rem;
  }

  .numb-item-two,
  .numb-item-four {
    padding-left: 2rem;
  }

  /* Number line */

  .numb-item-one,
  .numb-item-two {
    padding-top: 0;
  }
  .numb {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 1.2rem;
  }

  /* Title line (separate line from number) */
  .int-head {
    font-family: "Purple purse", serif;
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.15;
    margin-bottom: 1rem;
  }

  .abt-img-box-one img,
  .abt-img-box-two img {
    height: 15rem;
    border-radius: 20px;
  }

  .about-img {
    padding-top: 20rem;
    height: 25rem;
  }

  /* DSA/AI visuals slightly smaller */
  .ai-img {
    height: 14rem;
  }
  .dsa-img {
    height: 22rem;
  }

  .con-img {
    height: 8rem;
  }

  .pro-con-img {
    height: 18rem;
  }

  .art-con-img {
    height: 18rem;
  }

  /* Projects */
  .prj-gallery {
    margin-top: -4.5%;
    padding-bottom: 5rem;
  }

  .prj-grid {
    width: 60%;
  }
}

/* ========================= 600px (large phones / phablets) ============== */
@media only screen and (max-width: 600px) {
  :root {
    --nav-w: 78%;
    --h-feature: auto;
    --h-ai: auto;
    --h-dsa: auto;
    --h-prj: auto;
  }

  /* Switch rows to single column */
  .row {
    max-width: 50rem;
    padding: 0 2rem;
    display: block;
  }
  .row [class^="col-"] {
    width: 100% !important;
    float: none;
  }
  .row [class^="col-"]:not(:last-child) {
    margin-right: 0;
    margin-bottom: 3rem;
  }

  .header {
    height: 60vh;
  }

  #mode-toggler {
    font-size: 1.2rem;
    height: 40px;
    width: 40px;
  }

  /* Nav becomes mobile pill */
  nav {
    height: 3rem;
  }
  .main-nav {
    border-radius: 24px;
  }
  .main-nav-list {
    gap: 0.5rem;
  }
  .main-nav-link:link {
    font-size: 0.95rem;
    padding: 6px 10px;
  }

  /* Hero text widths */

  .heading-primary-sub-one {
    padding-top: 2%;
  }

  .heading-primary-sub-two {
    font-size: 1rem;
    padding-top: 7%;
    width: 90%;
    left: 5%;
  }

  .heading-primary-sub-three {
    font-size: 2rem;
  }

  .section-feature .row {
    margin-bottom: 8%;
  }

  .heading-tertiary {
    font-size: 1.5rem;
    top: 14%;
    right: 5%;
  }

  .heading-tertiary-two {
    font-size: 1.5rem;
    top: 14%;
    right: 5%;
  }

  /* Cards/images fluid */
  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 20rem;
    padding: 1.25rem 1.75rem;
    margin: 0 0;
    border-radius: 20px;
  }
  .ai-img,
  .dsa-img {
    height: auto;
    width: 100%;
  }

  /* Footer clock: fluid, safe */

  .footer {
    padding: 0 3rem;
  }

  .quote-box {
    padding-bottom: 6rem;
    margin-left: 0;
  }
  #footer .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #footer .row .col-2-of-4 {
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
  }

  #footer .row .col-1-of-4 {
    flex: 0 0 50%;
    width: 50%;
    float: none;
    margin: 0;
    padding: 0;
  }

  /* kill inner floats/widths so content doesn’t offset vertically */
  .footer__navigation,
  .footer__navigation-two {
    float: none;
    width: 100%;
    margin-top: 0; /* ensure Contact isn’t nudged down */
    text-align: left;
  }

  .footer__item-clock {
    margin-left: 0;
    width: 80%;
    /* max-width: 100%; */
    padding: 4px 10px;
    /* white-space: nowrap; */
    /* overflow: hidden; */
    text-overflow: ellipsis;
  }
  .clock24 {
    font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  }
  .footer__link {
    font-size: 1rem;
  }
  .quote,
  .quote-two {
    font-size: clamp(1.8rem, 2rem + 2vw, 3rem);
  }
  .fa-solid {
    font-size: 3.6rem;
  }

  /* --------------- */

  .notes-box-text {
    padding-top: 10rem;
    font-size: 1rem;
    width: 70%;
  }

  /* --------------- */

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 0;
    padding-top: 25rem;
    height: 30rem;
    width: 22rem;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .img-about-box img {
    width: auto;
    height: 22rem;
  }

  .about-box-head {
    font-size: 2rem;
    width: 70%;
    text-align: left;
    /* margin-left: 5%; */
    padding-bottom: 5%;
  }

  .about-box-text {
    font-size: 1.2rem;
    text-align: justify;
  }

  .about-box {
    padding-top: 10rem;
    margin: 0 0;
    width: 100%;
    text-align: center;
  }

  .about-img {
    padding-top: 12rem;
    height: 30rem;
  }
  .heading-about {
    font-size: 4.5rem;
  }

  /* EXPERIENCE */

  .section-experience {
    margin-top: -5%;
    padding-top: 10%;
  }

  .exp-box-one {
    width: 30rem;
    transform: translateX(2rem);
  }
  .exp-box-two {
    width: 30rem;
    transform: translateX(2rem);
    margin-top: 0rem;
  }
  .exp-box-three {
    width: 30rem;
    transform: translateX(2rem);
    margin-top: 0rem;
  }
  .exp-box-four {
    width: 30rem;
    transform: translateX(2rem);
    margin-top: 0rem;
  }
  .exp-box-five {
    width: 30rem;
    transform: translateX(2rem);
    margin-top: 0rem;
  }

  .experience-role {
    font-size: 1.1rem;
  }

  .experience-meta {
    font-size: 0.9rem;
  }

  /* Duration badge (top-right inside the pill) */
  .dur {
    font-size: 1.3rem;
  }

  .interest-box {
    height: 74rem;
  }

  .abt-img-box-one {
    padding-top: 5rem;
  }

  .abt-img-box-two {
    display: none;
  }

  /* ------------------ */

  .ai-img {
    height: 12rem;
    width: auto;
  }

  .dsa-img {
    height: 22rem;
    width: auto;
  }

  .dsa-img-box img {
    height: 20rem;
  }

  .dsa-img-box video {
    height: auto;
    width: 90%;
  }

  .dsa-text-box {
    width: 70%;
  }

  .pro-con-img {
    height: 15rem;
    width: auto;
  }

  /* Projects */
  .prj-gallery {
    margin-top: -6.5%;
    padding-top: 5rem;
    padding-bottom: 10rem;
  }
}

/* ========================= 480px (most phones) =========================== */
@media only screen and (max-width: 480px) {
  :root {
    --nav-w: 88.5%;
  }

  /* Nav */
  .main-nav-list {
    gap: 0rem;
  }
  .main-nav-link:link {
    font-size: 0.9rem;
    padding: 6px 9px;
  }

  .header {
    height: 75vh;
  }

  #mode-toggler {
    font-size: 1.1rem;
    height: 35px;
    width: 35px;
    margin-left: 5px;
    margin-top: 5px;
  }

  .quote,
  .quote-two {
    font-size: clamp(1.8rem, 1.5rem + 2vw, 3rem);
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    width: 14rem;
  }

  .img-about-box img {
    width: auto;
    height: 22rem;
  }

  .about-box-head {
    font-size: 1.5rem;
    width: 80%;
    text-align: left;
    padding-bottom: 5%;
  }

  .about-box-text {
    font-size: 1rem;
    text-align: left;
    width: 72%;
  }

  .about-box {
    padding-top: 10rem;
    margin: 0 0;
    width: 100%;
    text-align: left;
  }

  .about-img {
    padding-top: 20rem;
    padding-bottom: 20rem;
    height: 30rem;
  }
  .heading-about {
    font-size: 4.5rem;
  }

  /* EXPERIENCE */

  .section-experience {
    margin-top: -5%;
    padding-top: 10%;
  }

  .exp-box-one {
    width: 22rem;
    transform: translateX(2rem);
  }
  .exp-box-two {
    width: 22rem;
    transform: translateX(2rem);
    margin-top: 0rem;
  }
  .exp-box-three {
    width: 22rem;
    transform: translateX(2rem);
    margin-top: 0rem;
  }
  .exp-box-four {
    width: 22rem;
    transform: translateX(2rem);
    margin-top: 0rem;
  }
  .exp-box-five {
    width: 22rem;
    transform: translateX(2rem);
    margin-top: 0rem;
  }

  .hobbies {
    padding-top: 50%;
  }

  .interest-box {
    height: 82rem;
  }

  .abt-img-box-one {
    padding-top: 15rem;
  }

  .notes-box-text {
    width: 80%;
  }

  .ai-img {
    height: 10rem;
    width: auto;
  }

  .dsa-img {
    height: auto;
    width: 95%;
  }

  .art-con-img {
    height: 15rem;
    width: auto;
  }

  /* Projects */
  .prj-gallery {
    margin-top: -6.5%;
    padding-top: 5rem;
    padding-bottom: 10rem;
  }

  .prj-grid {
    width: 75%;
  }
}

/* ========================= 384px (your explicit mobile target) =========== */
@media only screen and (max-width: 384px) {
  :root {
    --nav-w: 96.5%;
  }

  .header {
    height: 70vh;
  }

  .heading-primary-main {
    font-size: 2.5rem;
  }

  .heading-primary-sub-one {
    padding-top: 5%;
    font-size: 1.8rem;
    font-weight: 600;
  }

  .heading-primary-sub-two {
    font-size: 0.7rem;
    padding-top: 7%;
    width: 90%;
    left: 5%;
  }

  .heading-primary-sub-three {
    font-size: 1.2rem;
    font-weight: 600;
  }

  /* Nav extremely compact but tappable */
  .main-nav-link:link {
    font-size: 0.8rem;
    padding: 0 0;
  }

  .main-nav-list li {
    margin-left: -10px;
  }
  .nav-slash {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  #mode-toggler {
    font-size: 0.5rem;
    height: 15px;
    width: 15px;
    margin-left: 5px;
    margin-top: 10px;
  }

  .section-feature {
    margin-top: -20%;
  }

  .heading-tertiary {
    font-size: 1.5rem;
    top: 14%;
    right: 8%;
  }

  .heading-tertiary-two {
    font-size: 1.5rem;
    top: 14%;
    right: 8%;
  }

  .feature-box img,
  .feature-box-two img,
  .feature-box-three img,
  .feature-box-four img {
    top: 7rem;
    left: 2rem;
  }

  .section-feature .row {
    margin-bottom: 12%;
  }

  /* ------------ */

  .footer {
    padding: 0 1rem;
  }

  .quote-source {
    font-size: 0.8rem;
  }

  .meaning {
    font-size: 0.8rem;
  }

  .footer__list li {
    font-size: 0.8rem;
  }

  .footer__link:link,
  .footer__link:visited {
    font-weight: 500;
    font-size: 0.8rem;
  }

  .footer__item-clock {
    margin-left: -8%;
  }

  /* ------------------ */

  .notes-box-text {
    padding-top: 7rem;
    font-size: 0.8rem;
    width: 90%;
  }

  .book-tog-link {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 0;
    padding-top: 22rem;
    height: 20rem;
    width: 8rem;
  }

  .img-about-box img {
    width: auto;
    height: 22rem;
  }

  .about-box-head {
    font-size: 1.2rem;
    width: 80%;
    text-align: left;
    padding-bottom: 5%;
  }

  .about-box-text {
    font-size: 0.8rem;
    text-align: left;
    width: 75%;
  }

  .about-box {
    padding-top: 10rem;
    margin: 0 0;
    width: 100%;
    text-align: left;
  }

  .about-img {
    padding-top: 20rem;
    padding-bottom: 20rem;
    height: 30rem;
  }
  .heading-about {
    font-size: 3.5rem;
  }

  /* EXPERIENCE */

  .section-experience {
    margin-top: -5%;
    padding-top: 10%;
  }

  .exp-box-one {
    width: 18rem;
    transform: translateX(1rem);
  }
  .exp-box-two {
    width: 18rem;
    transform: translateX(1rem);
    margin-top: 0rem;
  }
  .exp-box-three {
    width: 18rem;
    transform: translateX(1rem);
    margin-top: 0rem;
  }
  .exp-box-four {
    width: 18rem;
    transform: translateX(1rem);
    margin-top: 0rem;
  }
  .exp-box-five {
    width: 18rem;
    transform: translateX(1rem);
    margin-top: 0rem;
  }

  .experience-role {
    font-size: 0.9rem;
  }

  .experience-meta {
    font-size: 0.6rem;
  }

  .dur {
    font-size: 1rem;
  }

  .story-box-text {
    font-size: 0.8rem;
  }

  .interest-box {
    height: 78rem;
  }

  .numb-item-one,
  .numb-item-two,
  .numb-item-three,
  .numb-item-four {
    padding-left: 0;
  }

  .numb {
    font-size: 1.4rem;
  }

  .int-head {
    font-size: 1.5rem;
  }

  .numb-text {
    font-size: 0.8rem;
    width: 100%;
  }

  .abt-img-box-one {
    padding-top: 12rem;
  }

  .dsa-text-box {
    width: 85%;
  }

  .dsa-head {
    font-size: 1.2rem;
  }

  .dsa-box-para {
    font-size: 0.8rem;
  }

  .ai-img {
    height: 8rem;
    width: auto;
  }

  .art-con-img {
    height: 12rem;
    width: auto;
  }

  .dsa-img {
    height: 10rem;
    width: 90%;
  }

  .pro-con-img {
    height: 12rem;
    width: auto;
  }

  .prj-gallery {
    margin-top: -8.5%;
    padding-top: 5rem;
    padding-bottom: 10rem;
  }

  .prj-grid {
    width: 85%;
  }

  .con-img {
    height: 6rem;
  }

  .fa-solid {
    font-size: 2.5rem;
  }
}

/* ========================= 320px (ultra-small) =========================== */
@media only screen and (max-width: 320px) {
  :root {
    --nav-w: 95%;
  }

  .main-nav-link:link {
    font-size: 0.85rem;
    padding: 6px 8px;
  }
  .main-nav-list {
    gap: 0.4rem;
  }
  .clock24 {
    font-size: clamp(0.8rem, 3.6vw, 0.9rem);
  }
}

/* ========================= Helper: tighten 820px projects stack ========== */
@media only screen and (max-width: 820px) {
  .prj-grid {
    grid-template-columns: 1fr;
  }
  .prj-gallery [id="prj-img"] {
    height: 22rem;
  }
}

/* Nav fits tighter; keep readable click targets */
/* .main-nav-link:link {
    font-size: 0.95rem;
    padding: 6px 10px;
  }
  .main-nav-list {
    gap: 0.75rem;
  } */

/* Row system: compress gutters a bit */
/* .row {
    max-width: 95%;
  }
  .row [class^="col-"]:not(:last-child) {
    margin-right: 3rem;
  }
  .row .col-1-of-3 {
    width: calc((100% - 2 * 3rem) / 3);
  }
  .row .col-2-of-3 {
    width: calc(2 * ((100% - 2 * 3rem) / 3) + 3rem);
  }
  .row .col-1-of-4 {
    width: calc((100% - 3 * 3rem) / 4);
  }
  .row .col-2-of-4 {
    width: calc(2 * ((100% - 3 * 3rem) / 4) + 3rem);
  }
  .row .col-3-of-4 {
    width: calc(3 * ((100% - 3 * 3rem) / 4) + 2 * 3rem);
  } */