/* Compact mobile sizing keeps artwork proportions and readable body text. */
@media (max-width: 600px) {
  :root { scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px)); }

  .section-shell,
  .site-header { width: calc(100% - 48px); }
  .site-header {
    top: calc(12px + env(safe-area-inset-top, 0px));
    grid-template-rows: 44px 46px;
    gap: 6px 12px;
    padding: 8px;
    border: 1px solid #ffffff24;
    border-radius: 24px;
    background: #101010b3;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 6px 20px #00000020;
    transition: grid-template-rows 300ms ease, gap 300ms ease, padding 300ms ease, background-color 300ms ease;
  }
  .site-header .brand {
    justify-self: start;
    width: fit-content;
    padding-inline: 8px;
    font-size: 20px;
    letter-spacing: 0;
  }
  .site-header .brand .specular-button__fx { display: none; }
  .site-header .nav-contact { width: 44px; height: 44px; padding: 0; }
  .site-header .nav-contact .ui-icon { width: 18px; height: 18px; }
  .site-header > .brand,
  .site-header > .nav-contact { transition: opacity 200ms ease, transform 300ms ease; }
  .site-header.is-mobile-collapsed {
    grid-template-rows: 0px 46px;
    row-gap: 0;
    padding-block: 6px;
    background: #101010e8;
  }
  .site-header.is-mobile-collapsed > .brand,
  .site-header.is-mobile-collapsed > .nav-contact {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
  }
  .portfolio-jelly-nav {
    display: grid;
    grid-template-columns: .68fr 1fr 1.15fr 1fr;
    width: 100%;
    padding: 0;
    --jr-h: 46px !important;
    --jr-font: 12px !important;
    --jr-px: 0px !important;
    --jr-gap: 4px !important;
  }
  .site-header nav a.jelly-radio__chip { min-width: 0; width: 100%; font-size: inherit; }
  .site-header .jelly-radio__skin { min-width: 0; width: 100%; }
  .site-header .jelly-radio__label { letter-spacing: 0; }

  .hero { height: min(740px, calc(100svh - 128px)); min-height: 440px; max-height: none; }
  .hero-poster-layout {
    width: min(calc(100% - 60px), calc(max(220px, 100svh - 320px) * .88));
    top: max(228px, calc(50% - 8px));
  }
  .hero-poster-layout .poster-greeting { font-size: 24px; }
  .hero-poster-layout #hero-title { font-size: 58px; }
  .hero-poster-layout .poster-signature { font-size: 8px; }
  .poster-scroll { left: 24px; bottom: 18px; min-height: 44px; padding: 10px 14px; font-size: 11px; }
  .scene-caption { right: 24px; bottom: 18px; gap: 8px; }
  .scene-caption .title-replay { min-height: 44px; padding: 10px 12px; font-size: 11px; }
  .scene-caption #motion-toggle { width: 44px; height: 44px; }

  .work-section { padding-block: 10px 36px; }
  .project-rail { min-height: 200px; padding-block: 22px 20px; gap: 14px; }
  .project-card { width: 120px; min-width: 120px; }
  .project-card h3 { font-size: 11px; }
  .project-meta { margin-top: 10px; }

  .about-section,
  .strengths-section { padding-block: 46px; }
  .section-topline { margin-bottom: 22px; }
  .about-grid { margin-top: 24px; gap: 24px; }
  .about-flip-host { width: 92%; margin-inline: auto; }
  .about-card-poster { padding: 22px; }
  .about-card-poster h3 { font-size: 34px; gap: 9px; letter-spacing: 0; }
  .about-section h2,
  .about-copy h2 { font-size: 26px; letter-spacing: 0; }
  .about-copy .profile-bullets { margin-top: 18px; line-height: 1.8; }
  .profile-details { margin-top: 22px; gap: 18px 20px; }

  .experience-strip { margin-top: 34px; padding-top: 32px; gap: 24px; }
  .experience-heading h3 { font-size: 24px; letter-spacing: 0; }
  .experience-heading p { margin-top: 14px; }
  .experience-timeline { margin-top: 48px; }
  .experience-walker { width: 47.6px; height: 70px; }
  .experience-item { padding-bottom: 34px; }
  .experience-role h4 { font-size: 18px; letter-spacing: 0; }
  .experience-role > span,
  .experience-role strong { font-size: 12px; }
  .experience-date { font-size: 12px; }
  .experience-card p { margin-top: 12px; }
  .experience-tag { margin-top: 14px; }

  .case-showcase { padding-block: 50px 58px; }
  .case-showcase h2 { font-size: 36px; }
  .case-showcase-head { gap: 18px; margin-bottom: 24px; }
  .case-editorial { gap: 20px; }
  .case-art { min-height: 184px; }
  .case-editorial-copy { padding: 20px; }
  .case-editorial-copy h3 { font-size: 21px; }
  .case-number { font-size: 35px; margin-bottom: 12px; }
  .case-meta { margin-top: 12px; }
  .case-editorial-copy p { margin-top: 14px; line-height: 1.8; }
  .case-open { margin-top: 14px; }
  .case-bento-section { margin-top: 52px; padding-top: 36px; }
  .case-bento-heading { margin-bottom: 24px; }
  .case-bento-heading h3 { font-size: 22px; }
  .case-bento-heading p { font-size: 12px; }
  .case-bento { grid-template-rows: repeat(2, 184px) 296px; gap: 12px; }
  .bento-overlay { padding: 32px 18px 18px; }
  .bento-overlay strong { font-size: 18px; }

  .strengths-section h2 { font-size: 30px; letter-spacing: 0; }
  .strengths-section .strengths-intro { font-size: 11px; }
  .strengths-section .strength-card.large,
  .strengths-section .strength-card.small,
  .strengths-section .strength-card.small:last-child { height: 260px; padding: 22px; }
  .strengths-section .strength-card.large h3,
  .strengths-section .strength-card.featured h3 { font-size: 23px; margin-top: 22px; }
  .strengths-section .strength-card.small h3 { font-size: 21px; margin-top: 22px; }
  .strengths-section .strength-card p { font-size: 12px; margin-top: 10px; }
  .strength-art { scale: .68; }
  .strengths-section .strength-card:not(.featured) .strength-art { scale: .62; }
  .strength-art-star { bottom: 126px; }
  #skills-bubble-menu { width: min(186px, 65%); height: 124px; right: 26px; bottom: 18px; }
  #skills-bubble-menu .pill-list { gap: 6px; }
  #skills-bubble-menu .pill-link { height: 34px; min-height: 34px; font-size: 12px; }

  .contact-section { padding-block: 50px; gap: 28px; }
  .contact-main h2 { font-size: 50px; line-height: 1.04; letter-spacing: 0; margin-top: 22px; }
  .contact-main > p { margin-top: 20px; }
  .contact-card-wrap { margin-top: 54px; }
  .contact-card { padding: 22px; }
  .contact-card h3 { font-size: 22px; }
  .contact-detail { padding-block: 16px; }
  .contact-mascot { width: 86px; }
  .site-footer { padding-block: 20px; gap: 14px; }
  .footer-brand { font-size: 21px; }

  #project-detail { padding: 26px 24px; }
  .detail-title h2 { font-size: 26px; letter-spacing: 0; }
  .project-documents { margin-top: 22px; }
  .project-document-heading h3 { font-size: 17px; }
  .project-document-heading { gap: 8px; }
  .project-pages { gap: 10px; }
  .project-chapter + .project-chapter { padding-top: 32px; }
  .project-continuation { margin-top: 36px; padding-block: 20px; }
  .project-continuation strong,
  .project-reader-end strong { font-size: 17px; }
  .project-reader-end { margin-top: 36px; padding-top: 26px; }
  .dialog-bottom { padding: 12px 20px; }
  .dialog-bottom > button,
  .dialog-bottom > a { min-height: 36px; display: inline-flex; align-items: center; }
}

@media (max-width: 360px) {
  .portfolio-jelly-nav { --jr-font: 11px !important; }
  .hero-poster-layout .poster-greeting { font-size: 22px; }
  .hero-poster-layout #hero-title { font-size: 50px; }
  .about-card-poster { padding: 20px; }
  .about-card-poster h3 { font-size: 28px; }
  .case-showcase h2 { font-size: 30px; }
  .case-bento-heading h3 { font-size: 19px; }
  .contact-main h2 { font-size: 44px; }
  .contact-card { padding: 20px; }
}