/* Mobile composition follows the separate 390 px Figma layouts. */
.project__jump,.creators-mobile-break {display:none;}
@media(max-width:800px) {
  :root {--mobile-pill-width:92px;--mobile-pill-height:30px;--mobile-brand-size:clamp(20px,6.153846vw,28px);}
  .portfolio-page .hero {--mobile-role-size:clamp(9.5px,3.2cqw,16px);height:auto;min-height:0;aspect-ratio:390/724;}
  .portfolio-page .hero__photo {object-position:49.4% center;}
  .portfolio-page .hero__name {top:27.5%;font-size:15.3cqw;-webkit-text-stroke:.22cqw #000;}
  .portfolio-page .hero__first {top:.4cqw;}
  .portfolio-page .hero__name .hero__surname-mobile {top:15.5cqw;font-size:15.15cqw;}
  .portfolio-page .hero__surname-mobile i {font-size:21.1cqw;margin-right:1cqw;}
  .portfolio-page .hero__surname-mobile b {font-size:18.2cqw;}
  .portfolio-page .hero__roles {top:calc(27.5% + 40.7cqw);left:3%;width:94%;max-width:none;font-family:'Times New Roman',Times,serif;font-size:var(--mobile-role-size);line-height:1.4;color:#fff;text-shadow:0 1px 2px #222,0 2px 5px #0009;text-align:center;}
  .portfolio-page .hero__nav {inset:calc(27.5% + 40.7cqw + 25px + 1.4 * var(--mobile-role-size)) auto auto 50%;transform:translateX(-50%);width:min(74%,280px);max-width:none;grid-template-columns:repeat(2,var(--mobile-pill-width));justify-content:space-between;gap:18px 20px;margin:0;}
  .portfolio-page .hero__nav a,.portfolio-page .how .pill,.creators-page .creators-hero__nav a,.creators-page .creators-hero__nav a:last-child {width:var(--mobile-pill-width);height:var(--mobile-pill-height);min-width:0;padding:0;background:#131313;border:1px solid #131313;color:#fff;font:700 11px/1 Arimo,Arial,sans-serif;border-radius:999px;}
  .portfolio-page .hero__nav a,.portfolio-page .how .pill,.creators-page .creators-hero__nav a {transition:background .2s,border-color .2s,transform .2s;}
  .portfolio-page .hero__nav a:is(:hover,:focus-visible),.creators-page .creators-hero__nav a:is(:hover,:focus-visible) {background:#ff009d;border-color:#ff009d;transform:translateY(-3px);}
  .portfolio-page .how .pill:is(:hover,:focus-visible) {background:#ff009d;border-color:#ff009d;transform:translate(-50%,-3px);}

  .portfolio-page .about {aspect-ratio:390/724;min-height:0;}
  .portfolio-page .about__sky {height:135%;top:-3%;object-fit:fill;}
  .portfolio-page .about__portrait {top:16cqw;bottom:auto;left:50%;transform:translateX(-50%);width:137.75cqw;height:auto;max-height:none;margin:0;object-fit:contain;}
  .portfolio-page .about h2 {top:62%;left:10%;width:85%;font-size:14cqw;line-height:1.1;}
  .portfolio-page .about h2 em {top:-3cqw;left:50cqw;width:30cqw;font-size:27cqw;line-height:1;}
  .portfolio-page .about__description {top:76%;left:11%;width:78%;text-align:center;text-shadow:-.5px -.5px 1px #0008,.5px .5px 1px #0008,0 2px 3px #000a,0 4px 6px #0008;}
  .portfolio-page .about__copy p {display:inline;max-width:none;font:400 clamp(14px,4.358974cqw,20px)/1.2 Arimo,Arial,sans-serif;margin:0;text-align:center;color:#fff;}
  .portfolio-page .about__copy p:first-child::after {content:' ';}

  :is(.portfolio-page,.creators-page) .gallery {aspect-ratio:390/724;min-height:0;padding:0;}
  :is(.portfolio-page,.creators-page) .gallery__heading {position:absolute;top:8.5%;left:19.230769%;width:61.282051%;height:auto;padding:0;display:block;}
  :is(.portfolio-page,.creators-page) .gallery h2 {width:100%;max-width:none;font:400 12.820513cqw/1.4 Dotum,Arial,sans-serif;transform:none;white-space:normal;-webkit-text-stroke:.25641cqw #111;}
  :is(.portfolio-page,.creators-page) .gallery h2 span {display:block;}
  :is(.portfolio-page,.creators-page) .gallery:has(.gallery__viewer:not([hidden])) {aspect-ratio:390/684;}
  :is(.portfolio-page,.creators-page) .gallery:has(.gallery__viewer:not([hidden])) .gallery__heading {top:8.4%;left:3%;width:94%;}
  :is(.portfolio-page,.creators-page) .gallery:has(.gallery__viewer:not([hidden])) h2 {white-space:nowrap;line-height:1.1;}
  :is(.portfolio-page,.creators-page) .gallery:has(.gallery__viewer:not([hidden])) h2 span {display:inline;}
  :is(.portfolio-page,.creators-page) .gallery__folders {position:absolute;inset:0;display:block;width:100%;margin:0;}
  :is(.portfolio-page,.creators-page) .gallery__folders[hidden] {display:none;}
  :is(.portfolio-page,.creators-page) .folder {position:absolute;left:6.666667%;top:35%;width:30.25641%;height:auto;}
  :is(.portfolio-page,.creators-page) .folder:nth-child(2) {left:41.794872%;top:48.5%;}
  :is(.portfolio-page,.creators-page) .folder:nth-child(3) {left:11.025641%;top:62.5%;}
  :is(.portfolio-page,.creators-page) .folder:nth-child(4) {left:41.794872%;top:76%;}
  :is(.portfolio-page,.creators-page) .folder__icon {position:static;width:30.25641cqw;height:20.25641cqw;margin:0;}
  :is(.portfolio-page,.creators-page) .folder:nth-child(n) .folder__name {position:absolute;left:100%;top:9cqw;width:max-content;max-width:32cqw;height:auto;min-height:0;margin:0;display:block;font-size:clamp(10px,2.564103cqw,16px);line-height:1.2;text-align:left;}
  :is(.portfolio-page,.creators-page) .folder:nth-child(2) .folder__name {max-width:22cqw;}
  :is(.portfolio-page,.creators-page) .folder:nth-child(4) .folder__name {max-width:22cqw;}
  /* Mobile creators folder positions follow Figma's four-folder zigzag.
     Desktop retains its original horizontal order. */
  .creators-page .gallery__heading {top:6.077348%;}
  .creators-page .folder:nth-child(2) {left:6.666667%;top:31.767956%;}
  .creators-page .folder:nth-child(3) {left:41.794872%;top:44.337017%;}
  .creators-page .folder:nth-child(4) {left:11.025641%;top:56.906077%;}
  .creators-page .folder:nth-child(1) {left:47.435897%;top:67.403315%;}
  :is(.portfolio-page,.creators-page) .gallery__viewer {position:absolute;top:22%;left:0;display:flex;flex-direction:column;margin:0;}
  :is(.portfolio-page,.creators-page) .gallery__viewer[hidden] {display:none;}
  :is(.portfolio-page,.creators-page) .gallery__viewer-top {order:0;position:relative;top:auto;left:auto;width:90%;gap:10px;display:flex;align-items:center;justify-content:space-between;margin:0 auto 10px;font-size:11px;}
  :is(.portfolio-page,.creators-page) .gallery__viewer-top span:nth-child(2) {position:static;transform:none;max-width:48%;font-size:clamp(11px,3.3cqw,16px);text-align:center;}
  :is(.portfolio-page,.creators-page) .gallery__stage {order:1;width:100%;height:76.923077cqw;flex:none;margin:0;clip-path:inset(0 4%);}
  :is(.portfolio-page,.creators-page) .gallery__slide {--photo-height:71.794872cqw;top:3.076923cqw;}
  :is(.portfolio-page,.creators-page) .gallery__slide[data-offset="-1"],:is(.portfolio-page,.creators-page) .gallery__slide[data-offset="1"] {--photo-height:58.974359cqw;top:9.487179cqw;}
  :is(.portfolio-page,.creators-page) .gallery__controls {order:2;margin:0;gap:20px;}
  :is(.portfolio-page,.creators-page) .gallery__heart {order:3;position:static;top:auto;left:auto;right:auto;width:44px;height:44px;margin:14px auto 0;}
  :is(.portfolio-page,.creators-page) .gallery__heart--right {display:none;}

  .portfolio-page .how {aspect-ratio:390/724;min-height:0;}
  .portfolio-page .how__background {object-fit:cover;object-position:center;}
  .portfolio-page .how h2 {top:calc(36.410256cqw - .6%);left:5%;width:90%;font-size:10.25641cqw;line-height:1.15;-webkit-text-stroke:2px #202020;}
  .portfolio-page .how__note {top:34.2%;left:50%;width:60.512821cqw;height:46.153846cqw;transform:translateX(-50%);border-radius:6cqw;}
  .portfolio-page .how__note h3 {height:11.025641cqw;border-radius:7cqw;padding:0;font-size:var(--mobile-brand-size);line-height:11.025641cqw;}
  .portfolio-page .how__note p {top:13.2cqw;left:50%;width:53.076923cqw;font-size:3.589744cqw;line-height:1.14;}
  .portfolio-page .how .pill {top:69%;bottom:auto;left:50%;transform:translateX(-50%);margin:0;}

  .portfolio-page .work {padding:50px 20px 0;}
  .portfolio-page .work__star {width:min(5.5vw,26px);}
  .portfolio-page .project {margin-bottom:64px;scroll-margin-top:24px;}
  .portfolio-page .project-pair {display:contents;}
  .portfolio-page .project-pair__heading {display:none;}
  .portfolio-page .project-pair .project {position:relative;width:100%;margin:0 auto 64px;}
  .portfolio-page .project-pair .project > h3 {display:block;}
  .portfolio-page .project h3 {font-size:var(--mobile-brand-size);line-height:1.15;max-width:100%;margin:0 auto 26px;scroll-margin-top:24px;}
  .portfolio-page #project-innocentexas {top:-19px;}
  .portfolio-page .project__videos {position:static;grid-template-columns:minmax(0,1fr);gap:28px;width:min(82vw,320px);margin:0 auto;}
  .portfolio-page .video-card video {aspect-ratio:300/550;border-radius:12px;}
  .portfolio-page .project:has(.project__jump) h3 {margin-bottom:0;}
  .portfolio-page .project__jump {display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:2px auto 10px;padding:0;border:0;background:none;color:#ff009d;text-decoration:none;transition:transform .2s,color .2s;}
  .portfolio-page .project__jump:hover {color:#111;transform:translateY(3px);}

  .portfolio-page .contact__links {left:14%;right:7%;gap:18px;}
  .portfolio-page .contact__links a {display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;min-height:22px;font-size:clamp(11px,3.2cqw,13px);}
  .portfolio-page .contact__links a span:first-child {grid-column:auto;font-size:inherit;text-align:left;}
  .portfolio-page .contact__links a strong {font-size:inherit;text-align:left;}
  .portfolio-page .contact__stars img:nth-child(1) {top:405px;}
  .portfolio-page .contact__stars img:nth-child(2) {top:445px;}
  .portfolio-page .contact__stars img:nth-child(3) {top:485px;}

  /* Match the supplied 610 px crop, with all positions anchored to the title. */
  .creators-page .creators-hero h1 {left:6.393443%;width:93.606557%;font-size:11.311475cqw;line-height:1.15942;text-align:left;white-space:nowrap;-webkit-text-stroke:.327869cqw #0c0202;z-index:3;}
  .creators-page .creators-hero__note {left:9.344262%;top:calc(16.574586% + 28.52459cqw);width:75.409836%;height:32.131148cqw;border-width:.25641cqw;border-radius:8.196721cqw;}
  .creators-page .creators-hero__description {left:11.803279%;top:calc(16.574586% + 31.147541cqw);width:70.819672%;font-size:3.770492cqw;line-height:1.43;z-index:2;}
  .creators-page .creators-hero__description br {display:inline;}
  .creators-mobile-break {display:inline;}
  .creators-page .creators-hero__fairy {left:73.606557%;top:calc(16.574586% + 19.508197cqw);width:29.657541%;height:37.704918cqw;z-index:4;}
  .creators-page .creators-hero__nav {left:50%;top:calc(16.574586% + 63.934426cqw);transform:translateX(-50%);gap:20px;}
  .creators-page .creators-hero__portrait {top:58.38674%;}
  .creators-page .creators-return__link {height:var(--mobile-pill-height);min-height:var(--mobile-pill-height);padding:0 16px;font-size:12px;}

  .creators-page .creator-videos {aspect-ratio:auto;display:grid;gap:44px;padding:28px 0 60px;}
  .creators-page .creator-video,.creators-page .creator-video-pair {position:relative;left:auto;top:auto;width:min(82vw,320px);height:auto;margin:0 auto;}
  .creators-page .creator-video video {height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;}
  .creators-page .creator-video figcaption {position:static;left:auto;top:auto;transform:none;width:100%;margin:10px 0 0;font-size:12px;line-height:1.3;}
  .creators-page .creator-video--magno figcaption {margin:0 0 12px;}
  .creators-page .creator-video-pair {display:grid;grid-template-columns:minmax(0,1fr);gap:28px;}
  .creators-page .creator-video-pair video,.creators-page .creator-video-pair video:last-child {width:100%;height:auto;aspect-ratio:300/550;object-fit:cover;border-radius:12px;}
  .creators-page .creator-videos__stars {position:absolute;inset:0;pointer-events:none;}
  .creators-page .creator-videos__stars img,.creators-page .creators-return > img {width:min(5.5vw,26px);height:auto;object-fit:contain;}
  .creators-page .creator-videos__stars img:nth-child(odd) {left:1%;}
  .creators-page .creator-videos__stars img:nth-child(even) {left:auto;right:1%;}
}
