/* ==========================================================================
   Responsive Stylesheet (Modern em / rem / clamp() Standard)
   Breakpoints:
   - 67.5em     (~1080px)
   - 61.9375em  (~991px)
   - 48em       (~768px)
   - 42.5em     (~680px)
   - 29.9375em  (~479px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoint: <= 67.5em (~1080px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 67.5em) {
  .github-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: <= 61.9375em (~991px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 61.9375em) {
  /* Navigation */
  .page-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding: 0;
    z-index: 1000;
  }

  .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }

  .nav-emblem {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
  }

  .nav-brand-text {
    font-size: 0.95rem;
    line-height: 1.15;
  }

  .nav-clock {
    padding: 0;
    font-size: 0.85rem;
  }

  .nav-contact-btn {
    padding: 0.45rem 1.125rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 999em;
  }

  /* Hero Section */
  .page-header {
    height: 88vh;
    min-height: 36.25rem;
    margin-bottom: 0;
    padding-top: 10vh;
    padding-bottom: 2rem;
    position: relative;
    overflow: visible;
  }

  .page-header_inner {
    align-items: flex-start;
    height: 100%;
  }

  .container.is__full.is__header {
    height: 100%;
    padding-left: clamp(1.25rem, 2.5vw, 2rem) !important;
    padding-right: clamp(1.25rem, 2.5vw, 2rem) !important;
  }

  .page-header_content {
    height: 100%;
    position: relative;
  }

  .page-header_title {
    width: 60vw;
    font-size: clamp(2.8rem, 7.5vw, 4.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .page-header_anime-wrapper {
    width: 60vw;
    margin-top: 0;
    position: relative;
  }

  .text-heading.is__anime {
    font-size: clamp(2.8rem, 7.5vw, 4.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .layout-grid.is__header {
    position: absolute;
    inset: auto 0% 0% auto;
    width: 45vw;
    max-width: 30rem;
    height: 100%;
    border-radius: 2rem;
  }

  /* Section 1: Introduction & Cards */
  .content-home_introduction {
    margin-top: -2.5vh;
  }

  .feature-introduction {
    display: flex;
    flex-direction: column-reverse;
    gap: 2.5rem;
  }

  .feature-introduction_col {
    width: 100%;
  }

  .feature-introduction_col.is__sticky {
    position: relative;
    top: 0;
    min-height: unset;
    margin-bottom: 1rem;
    display: block;
  }

  .section-heading.is__intro {
    position: relative;
    top: 0;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    font-size: clamp(2.6rem, 8.5vw, 4.6rem);
    line-height: 0.94;
  }

  .feature-introduction_list {
    display: flex;
    flex-direction: column;
    gap: clamp(12rem, 28vh, 22rem);
    padding-bottom: clamp(10rem, 24vh, 18rem);
    position: relative;
    width: 100%;
  }

  .feature-introduction_item {
    position: sticky;
    top: clamp(3.5rem, 6.5vh, 5rem);
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
  }

  #card-about { z-index: 10; }
  #card-experience { z-index: 20; }
  #card-tech { z-index: 30; }
  #contact-card { z-index: 40; }

  .layout-grid.is__introduction,
  .layout-grid.is__introduction.is__1,
  .layout-grid.is__introduction.is__2 {
    filter: drop-shadow(0 0.875rem 1.875rem rgba(0, 0, 0, 0.12));
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    box-sizing: border-box !important;
  }

  .layout-grid.is__introduction.is__1 {
    display: grid;
    grid-template-columns: max-content 1.5rem minmax(0, 1fr);
    grid-template-rows: 2.75rem 1fr;
  }

  .layout-grid.is__introduction.is__1 > .layout-grid_block.border-tr.border-tl {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 2.75rem;
    padding: 0 1.375rem !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .layout-grid.is__introduction.is__1 > .layout-grid_inner.is__large.is__bl {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 1.5rem;
    height: 1.5rem;
    align-self: end;
    margin-bottom: -0.2px;
  }

  .layout-grid.is__introduction.is__2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.5rem max-content;
    grid-template-rows: 2.75rem 1fr;
  }

  .layout-grid.is__introduction.is__2 > .layout-grid_inner.is__large.is__br {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 1.5rem;
    height: 1.5rem;
    align-self: end;
    margin-bottom: -0.2px;
  }

  .layout-grid.is__introduction.is__2 > .layout-grid_block.border-tl.border-tr {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    height: 2.75rem;
    padding: 0 1.375rem !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
  }

  .layout-grid.is__introduction.is__1 > .layout-grid_block.border-bl.border-br.border-tr,
  .layout-grid.is__introduction.is__2 > .layout-grid_block.border-tr.border-bl.border-br.border-tl {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    width: 100%;
    box-sizing: border-box;
    min-height: clamp(26rem, 58vh, 34rem);
    padding: 1.75rem 1.5rem !important;
  }

  /* Footer & Contact */
  .footer-contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .section-heading.is__footer {
    font-size: clamp(2.4rem, 8vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
  }

  .section-heading.is__footer .text-heading {
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .section-heading.is__footer .text-heading.is__middle {
    margin-left: clamp(1.5rem, 4vw, 3.2rem);
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: <= 48em (~768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 48em) {
  .container,
  .container.is__full,
  .container.is__wide {
    padding-left: clamp(1rem, 4vw, 1.25rem) !important;
    padding-right: clamp(1rem, 4vw, 1.25rem) !important;
  }

  /* Navigation */
  .page-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding: 0;
    z-index: 1000;
  }

  .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }

  .nav-emblem {
    width: 2.375rem;
    height: 2.625rem;
    border-radius: 0.5rem;
  }

  .nav-brand-text {
    font-size: 0.88rem;
    line-height: 1.15;
  }

  .nav-clock {
    padding: 0;
    font-size: 0.78rem;
  }

  .nav-contact-btn {
    padding: 0.45rem 1.125rem 0.375rem;
    font-size: 0.72rem;
    border-radius: 999em;
  }

  /* Hero Section */
  .page-header {
    height: 92vh;
    min-height: 35rem;
    padding-top: 12vh;
    padding-bottom: 2rem;
    position: relative;
    overflow: visible;
  }

  .page-header_inner {
    height: 100%;
    align-items: flex-start;
  }

  .page-header_content {
    height: 100%;
    padding-bottom: 0;
    position: relative;
    width: 100%;
  }

  /* Typography */
  .text-heading.is__static {
    white-space: nowrap;
    display: block;
    line-height: 1;
    font-weight: 300;
  }

  .page-header_title {
    width: 100%;
    font-size: 12vw;
    line-height: 1;
    letter-spacing: -0.015rem;
    text-transform: uppercase;
  }

  .page-header_anime-wrapper {
    width: 100%;
    margin-top: 0;
    position: relative;
  }

  .text-heading.is__anime {
    font-size: 12vw;
    line-height: 1;
    letter-spacing: -0.015rem;
    color: var(--red);
    font-weight: 300;
  }

  /* Hero Photo Card */
  .layout-grid.is__header {
    position: absolute;
    inset: auto 0% 0% auto;
    width: 60%;
    height: 55%;
    max-width: 23.75rem;
    min-height: 16.25rem;
    z-index: 1;
    border-radius: 1.75rem;
  }

  /* Section 1: Intro Heading & Card Deck */
  .section-heading.is__intro {
    font-size: clamp(2.2rem, 8.5vw, 3.6rem);
  }

  .feature-introduction_list {
    display: flex;
    flex-direction: column;
    gap: clamp(10rem, 26vh, 20rem);
    padding-bottom: clamp(8rem, 22vh, 16rem);
    width: 100%;
  }

  .feature-introduction_item {
    position: sticky;
    top: clamp(3.5rem, 6.5vh, 5rem);
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
  }

  #card-about { z-index: 10; }
  #card-experience { z-index: 20; }
  #card-tech { z-index: 30; }
  #contact-card { z-index: 40; }

  .layout-grid.is__introduction,
  .layout-grid.is__introduction.is__1,
  .layout-grid.is__introduction.is__2 {
    filter: drop-shadow(0 0.875rem 1.875rem rgba(0, 0, 0, 0.12));
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .layout-grid.is__introduction.is__1 {
    display: grid;
    grid-template-columns: max-content 1.25rem minmax(0, 1fr);
    grid-template-rows: 2.75rem 1fr;
  }

  .layout-grid.is__introduction.is__1 > .layout-grid_block.border-tr.border-tl {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 2.75rem;
    padding: 0 1.125rem !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
  }

  .layout-grid.is__introduction.is__1 > .layout-grid_inner.is__large.is__bl {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 1.25rem;
    height: 1.25rem;
    align-self: end;
    margin-bottom: -0.2px;
  }

  .layout-grid.is__introduction.is__2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.25rem max-content;
    grid-template-rows: 2.75rem 1fr;
  }

  .layout-grid.is__introduction.is__2 > .layout-grid_inner.is__large.is__br {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 1.25rem;
    height: 1.25rem;
    align-self: end;
    margin-bottom: -0.2px;
  }

  .layout-grid.is__introduction.is__2 > .layout-grid_block.border-tl.border-tr {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    height: 2.75rem;
    padding: 0 1.125rem !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    justify-self: end;
  }

  .layout-grid.is__introduction.is__1 > .layout-grid_block.border-bl.border-br.border-tr,
  .layout-grid.is__introduction.is__2 > .layout-grid_block.border-tr.border-bl.border-br.border-tl {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    width: 100%;
    box-sizing: border-box;
    min-height: clamp(26rem, 58vh, 34rem);
    padding: 1.5rem 1.25rem !important;
  }

  .layout-grid_inner.is__large {
    width: 1.25rem;
    height: 1.25rem;
    background-size: 1.25rem 1.25rem;
  }

  .layout-grid_content.is__label {
    min-height: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text-section {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .experience-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .experience-card-role {
    font-size: 1.15rem;
  }

  .experience-card-year {
    font-size: 0.75rem;
  }

  .tech-grid {
    grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
    gap: 0.5rem;
  }

  .social-pills-wrap.is__icons-only {
    gap: 0.625rem;
    margin-top: 0;
  }

  .contact-sticker-wrap {
    width: 100%;
    margin: 0.5rem 0 1.15rem;
  }

  .contact-sticker-img {
    width: 100%;
    height: auto;
    max-height: 17.5rem;
    border-radius: 0.875rem;
  }

  .calum-social-pill.is__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6875rem;
  }

  .calum-social-pill.is__icon .social-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Footer & Contact Heading */
  .footer-contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section-heading.is__footer {
    font-size: clamp(2rem, 9.5vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
    width: 100%;
  }

  .section-heading.is__footer .text-heading {
    line-height: 1;
    letter-spacing: -0.025em;
  }

  .section-heading.is__footer .text-heading.is__middle {
    margin-left: clamp(1rem, 3.5vw, 2.2rem);
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: <= 42.5em (~680px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 42.5em) {
  .github-projects-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: <= 29.9375em (~479px) Mobile Phones
   -------------------------------------------------------------------------- */
@media screen and (max-width: 29.9375em) {
  .container,
  .container.is__full,
  .container.is__wide {
    padding-left: clamp(1rem, 4vw, 1.25rem) !important;
    padding-right: clamp(1rem, 4vw, 1.25rem) !important;
  }

  /* Navigation */
  .page-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 1.25rem;
    margin-bottom: 0;
    padding: 0;
    z-index: 1000;
  }

  .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: auto;
  }

  .nav-emblem {
    width: 2.125rem;
    height: 2.375rem;
    border-radius: 0.5rem;
  }

  .nav-brand-text {
    font-size: 0.82rem;
    line-height: 1.15;
  }

  .nav-clock {
    padding: 0;
    font-size: 0.72rem;
  }

  .nav-contact-btn {
    padding: 0.375rem 0.9375rem 0.3125rem;
    font-size: 0.7rem;
    border-radius: 999em;
  }

  /* Hero Section */
  .page-header {
    height: 94vh;
    min-height: 32.5rem;
    padding-top: 13vh;
    padding-bottom: 1.5rem;
  }

  .text-heading.is__static {
    white-space: nowrap;
    display: block;
    line-height: 1;
    font-weight: 300;
  }

  .page-header_title {
    width: 100%;
    font-size: 12vw;
    line-height: 1;
    letter-spacing: -0.015rem;
    text-transform: uppercase;
  }

  .page-header_anime-wrapper {
    width: 100%;
    margin-top: 0;
    position: relative;
  }

  .text-heading.is__anime {
    font-size: 12vw;
    line-height: 1;
    letter-spacing: -0.015rem;
    color: var(--red);
    font-weight: 300;
  }

  .layout-grid.is__header {
    position: absolute;
    inset: auto 0% 0% auto;
    width: 68%;
    height: 56%;
    max-width: 20rem;
    border-radius: 1.5rem;
  }

  /* Section 1: Intro Heading & Card Deck */
  .section-heading.is__intro {
    font-size: clamp(2rem, 9.5vw, 3.2rem);
  }

  .feature-introduction_list {
    display: flex;
    flex-direction: column;
    gap: clamp(8rem, 22vh, 16rem);
    padding-bottom: clamp(6rem, 18vh, 14rem);
    width: 100%;
  }

  .feature-introduction_item {
    position: sticky;
    top: clamp(3rem, 6vh, 4.5rem);
    width: 100%;
  }

  #card-about { z-index: 10; }
  #card-experience { z-index: 20; }
  #card-tech { z-index: 30; }
  #contact-card { z-index: 40; }

  .layout-grid.is__introduction.is__1 {
    grid-template-columns: max-content 1.125rem minmax(0, 1fr);
    grid-template-rows: 2.5rem 1fr;
  }

  .layout-grid.is__introduction.is__1 > .layout-grid_block.border-tr.border-tl {
    height: 2.5rem;
    padding: 0 0.875rem !important;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }

  .layout-grid.is__introduction.is__1 > .layout-grid_inner.is__large.is__bl {
    width: 1.125rem;
    height: 1.125rem;
    background-size: 1.125rem 1.125rem;
  }

  .layout-grid.is__introduction.is__2 {
    grid-template-columns: minmax(0, 1fr) 1.125rem max-content;
    grid-template-rows: 2.5rem 1fr;
  }

  .layout-grid.is__introduction.is__2 > .layout-grid_inner.is__large.is__br {
    width: 1.125rem;
    height: 1.125rem;
    background-size: 1.125rem 1.125rem;
  }

  .layout-grid.is__introduction.is__2 > .layout-grid_block.border-tl.border-tr {
    height: 2.5rem;
    padding: 0 0.875rem !important;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }

  .layout-grid_content.is__label {
    min-height: 2.5rem;
    height: 2.5rem;
  }

  .text-section {
    font-size: 0.68rem;
  }

  .layout-grid.is__introduction.is__1 > .layout-grid_block.border-bl.border-br.border-tr {
    min-height: clamp(27.5rem, 62vh, 35rem);
    padding: 1.35rem 1.15rem !important;
    border-radius: 0 1.125rem 1.125rem 1.125rem;
  }

  .layout-grid.is__introduction.is__2 > .layout-grid_block.border-tr.border-bl.border-br.border-tl {
    min-height: clamp(27.5rem, 62vh, 35rem);
    padding: 1.35rem 1.15rem !important;
    border-radius: 1.125rem 0 1.125rem 1.125rem;
  }

  .layout-grid_content {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .social-pills-wrap.is__icons-only {
    gap: 0.5rem;
    margin-top: 0;
  }

  .contact-sticker-wrap {
    width: 100%;
    margin: 0.4rem 0 1rem;
  }

  .contact-sticker-img {
    width: 100%;
    height: auto;
    max-height: 14.375rem;
    border-radius: 0.75rem;
  }

  .calum-social-pill.is__icon {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 0.625rem;
  }

  .calum-social-pill.is__icon .social-icon {
    width: 1.1875rem;
    height: 1.1875rem;
  }

  /* Typography scale inside cards for compact screens */
  .text-size_large {
    font-size: clamp(0.92rem, 2.8vw, 1.05rem);
    line-height: 1.55;
  }

  /* Footer & Contact Heading */
  .section-heading.is__footer {
    font-size: clamp(1.8rem, 10vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    width: 100%;
  }

  .section-heading.is__footer .text-heading {
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .section-heading.is__footer .text-heading.is__middle {
    margin-left: clamp(0.75rem, 3vw, 1.5rem);
    text-align: left;
  }
}