@font-face { font-family: Arimo; src: url('assets/fonts/Arimo-Variable.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Birthstone Bounce'; src: url('assets/fonts/BirthstoneBounce-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('assets/fonts/PixelifySans-Variable.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Herr Von Muellerhoff'; src: url('assets/fonts/HerrVonMuellerhoff-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: Dotum; src: url('assets/fonts/Dotum-Regular.woff2') format('woff2'); font-display: swap; }

.hero, .about, .gallery { --pink: #ff009d; --lime: #c1ff72; container-type: inline-size; }
.hero { height: auto; min-height: 0; aspect-ratio: 1440 / 780; display: block; }
.hero__photo { object-position: center; filter: none; }
.hero__veil { background: #fff; opacity: .3; }
.hero__content { position: absolute; inset: 0; width: 100%; padding: 0; }
.hero__name { position: absolute; inset: 0; font: 700 9.861111cqw / normal Arimo, Arial, sans-serif; letter-spacing: 0; color: var(--lime); -webkit-text-stroke: .138889cqw #000; text-shadow: .069444cqw .069444cqw 0 #222; }
.hero__name span, .hero__name span:first-child, .hero__name span:last-child { position: absolute; margin: 0; text-align: center; }
.hero__first { top: 17.948718%; left: 20.833333%; width: 58.333333%; }
.hero__surname { top: 36.923077%; left: 12.5%; width: 75%; white-space: pre; }
.hero__letter-c { top: 33.076923%; left: 17.222222%; width: 12.986111%; font: 400 11.805556cqw / normal 'Birthstone Bounce', cursive; color: var(--pink); text-shadow: none; }
.hero__letter-n { top: 36.025641%; left: 59.722222%; width: 12.986111%; font: 400 10.416667cqw / normal 'Pixelify Sans', monospace; color: var(--pink); text-shadow: none; }
.hero__name .hero__surname-mobile { display: none; }
.hero__roles { position: absolute; top: 55.384615%; left: 15.277778%; width: 69.444444%; max-width: none; margin: 0; font: 400 2.083333cqw / normal Dotum, Arial, sans-serif; letter-spacing: 0; text-shadow: .208333cqw .138889cqw .034722cqw rgba(0,0,0,.25); white-space: nowrap; }
.hero__roles { white-space: pre; }
.hero__nav { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
.hero__nav a { position: absolute; top: 73.974359%; width: 14.722222%; height: 6.538462%; min-width: 0; padding: 0; font: 700 1.736111cqw / normal Arimo, Arial, sans-serif; pointer-events: auto; }
.hero__nav a:nth-child(1) { left: 15.208333%; }
.hero__nav a:nth-child(2) { left: 33.75%; }
.hero__nav a:nth-child(3) { left: 52.291667%; }
.hero__nav a:nth-child(4) { left: 71.805556%; }

.about { min-height: 0; aspect-ratio: 1440 / 800; }
.about:after { display: none; }
.about__sky { width: 100%; height: 319.5%; left: .21%; top: -147.26%; object-fit: fill; max-width: none; }
.about__inner { position: absolute; inset: 0; min-height: 0; max-width: none; margin: 0; padding: 0; display: block; }
.about__portrait { position: absolute; left: -7.916667%; top: 14.875%; width: 66.25%; height: 85.125%; max-width: none; max-height: none; margin: 0; object-fit: fill; filter: none; }
.about__copy { position: static; max-width: none; margin: 0; padding: 0; text-shadow: none; }
.about h2 { position: absolute; top: 17.5%; left: 45.138889%; width: 43.055556%; max-width: none; margin: 0; font: 700 6.388889cqw / normal Arimo, Arial, sans-serif; letter-spacing: 0; text-align: left; }
.about h2 em { position: absolute; top: 1.875cqw; left: 21.944444cqw; width: 18.055556cqw; margin: 0; transform: none; font: 400 8.333333cqw / normal 'Herr Von Muellerhoff', cursive; color: var(--pink); text-shadow: 1.527778cqw 0 .694444cqw rgba(255,255,255,.25); }
.portfolio-page .about h2 em {text-shadow:0 0 .045em rgba(255,255,255,.2),0 0 .10em rgba(255,0,157,.1);animation:about-me-glow 4.8s ease-in-out infinite;}
@keyframes about-me-glow {
  0%,100% {text-shadow:0 0 .045em rgba(255,255,255,.2),0 0 .10em rgba(255,0,157,.1);}
  50% {text-shadow:0 0 .065em rgba(255,255,255,.34),0 0 .14em rgba(255,0,157,.18);}
}
.about__description { position: absolute; top: 42.375%; left: 45.138889%; width: 41.666667%; text-shadow: 0 .277778cqw .277778cqw #202020; }
.about__copy p { max-width: none; margin: 0 0 2.395833cqw; font: 400 2.083333cqw / normal Arimo, Arial, sans-serif; text-align: left; }

.gallery { min-height: 0; aspect-ratio: 1440 / 769; padding: 0; position: relative; overflow: hidden; }
.gallery__heading { padding-top: 1.875cqw; }
.gallery__heading h2 { transform: translateX(-.625cqw); }
.gallery h2 { margin: 0; font: 400 5.555556cqw / normal Dotum, Arial, sans-serif; letter-spacing: 0; color: var(--pink); -webkit-text-stroke: .069444cqw #111; }
.gallery__folders { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.777778cqw; width: 80%; max-width: none; margin: 6.25cqw auto 0; }
.folder { width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; }
.folder__icon { width: 20.833333cqw; height: 13.888889cqw; margin: auto; object-fit: contain; transition: transform .2s; }
.folder:not(:disabled):hover .folder__icon { transform: translateY(-6px); }
.folder:disabled { cursor: default; }
.folder__name { font: 400 2.083333cqw / 1.2 'Pixelify Sans', monospace; margin-top: 1.388889cqw; color: #090909; }
.gallery__viewer { position: absolute; top: 9.375cqw; left: 0; width: 100%; max-width: none; margin: 0; }
.gallery__viewer-top { position: absolute; top: 33.263889cqw; left: 12%; width: 76%; font: 400 1.388889cqw 'Pixelify Sans', monospace; }
.gallery__viewer-top span:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); color: #090909; font-size: 2.083333cqw; }
.gallery__stage { height: 33.333333cqw; margin: 0; overflow: visible; clip-path: inset(0 9%); }
.gallery__stage:focus-visible::after { content: ''; position: absolute; inset: 1px 10%; border: 2px solid var(--pink); border-radius: 12px; pointer-events: none; z-index: 10; }
.gallery__heart { position: absolute; top: 13.263889cqw; left: 2.708333cqw; width: 5.555556cqw; height: 5.555556cqw; object-fit: contain; pointer-events: none; }
.gallery__heart--right { left: auto; right: 2.986111cqw; }
.gallery__slide { --photo-height: 27.916667cqw; height: var(--photo-height); width: min(37.222222cqw,calc(var(--photo-height) * var(--ratio,1.333333))); top: 3.402778cqw; border-radius: 1.388889cqw; object-fit: cover; box-shadow: none; transition: left .65s cubic-bezier(.22,1,.36,1), top .65s cubic-bezier(.22,1,.36,1), width .65s cubic-bezier(.22,1,.36,1), height .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1), opacity .55s ease; }
.gallery__slide.is-entering { opacity: 0 !important; }
.gallery__slide[data-offset="0"] { transform: translateX(-50%); }
.gallery__slide[data-offset="-1"] { --photo-height: 19.166667cqw; top: 7.777778cqw; left: 28.125%; transform: translateX(-50%); opacity: 1; }
.gallery__slide[data-offset="1"] { --photo-height: 21.388889cqw; top: 6.944444cqw; left: 72.465278%; transform: translateX(-50%); opacity: 1; }
.gallery__slide[data-offset="-2"] { --photo-height: 11.736111cqw; top: 11.458333cqw; left: 19.479167%; transform: translateX(-50%); opacity: 1; }
.gallery__slide[data-offset="2"] { --photo-height: 11.736111cqw; top: 11.041667cqw; left: 80.520833%; transform: translateX(-50%); opacity: 1; }
.gallery__controls { margin-top: 4.166667cqw; }

@media(min-width:801px) {
  :is(.portfolio-page,.creators-page) .gallery:not(:has(.gallery__viewer:not([hidden]))) {display:flex;flex-direction:column;justify-content:center;gap:5.555556cqw;padding:0 0 1.944444cqw;}
  :is(.portfolio-page,.creators-page) .gallery:not(:has(.gallery__viewer:not([hidden]))) .gallery__heading {position:static;width:100%;height:auto;padding:0;display:block;text-align:center;}
  :is(.portfolio-page,.creators-page) .gallery:not(:has(.gallery__viewer:not([hidden]))) h2 {transform:none;}
  :is(.portfolio-page,.creators-page) .gallery:not(:has(.gallery__viewer:not([hidden]))) .gallery__folders {position:static;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;width:80%;gap:2.777778cqw;margin:0 auto;}
  .creators-page .gallery:not(:has(.gallery__viewer:not([hidden]))) .gallery__folders {grid-template-columns:repeat(4,minmax(0,1fr));}
  :is(.portfolio-page,.creators-page) .gallery__folders[hidden] {display:none;}
  :is(.portfolio-page,.creators-page) .folder:nth-child(n) {position:static;width:100%;height:auto;}
  :is(.portfolio-page,.creators-page) .gallery:not(:has(.gallery__viewer:not([hidden]))) .folder__icon {position:static;width:min(100%,20.833333cqw);height:auto;margin:0 auto;}
  :is(.portfolio-page,.creators-page) .folder:nth-child(n) .folder__name {position:static;width:100%;height:auto;margin:1.388889cqw 0 0;display:block;text-align:center;}
}

@media(max-width:800px) {
  .hero { aspect-ratio: auto; height: 100svh; min-height: 620px; }
  .hero__photo { object-position: 53% center; }
  .hero__name { inset: 27% 0 auto; height: 25%; font-size: 14cqw; }
  .hero__first { top: 0; left: 0; width: 100%; }
  .hero__surname { top: 15cqw; left: 0; width: 100%; }
  .hero__letter-c { top: 12.8cqw; left: 0; width: 17%; font-size: 19cqw; }
  .hero__letter-n { top: 14.2cqw; left: 71.5%; width: 16%; font-size: 15.7cqw; }
  .hero__name .hero__surname,.hero__name .hero__letter-c,.hero__name .hero__letter-n { display: none; }
  .hero__name .hero__surname-mobile { display: flex; align-items: baseline; justify-content: center; top: 15cqw; left: 0; width: 100%; white-space: nowrap; }
  .hero__surname-mobile i { font: 400 18cqw/.8 'Birthstone Bounce', cursive; color: var(--pink); margin-right: -1.5cqw; text-shadow: none; }
  .hero__surname-mobile b { font: 400 16cqw/1 'Pixelify Sans', monospace; color: var(--pink); text-shadow: none; }
  .hero__roles { top: 50%; left: 5%; width: 90%; font-size: 2.35cqw; white-space: normal; }
  .hero__roles span { padding: 0 1cqw; }
  .hero__nav { inset: 59% 7% auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
  .hero__nav a { position: static; width: 100%; height: 42px; font-size: 14px; }
  .about { aspect-ratio: auto; min-height: 760px; }
  .about__sky { height: 100%; top: 0; left: 0; object-fit: cover; object-position: 48% center; }
  .about h2 { top: 7%; left: 7%; width: 86%; font-size: 16cqw; }
  .about h2 em { top: 5cqw; left: 56cqw; width: 26cqw; font-size: 25cqw; }
  .about__description { top: 24%; left: 10%; width: 80%; }
  .about__copy p { font-size: 4.3cqw; line-height: 1.2; margin-bottom: 18px; }
  .about__portrait { top: auto; bottom: 0; left: -24%; width: 136%; height: auto; max-height: 460px; object-fit: contain; }
  .gallery { aspect-ratio: auto; min-height: 580px; padding-block: 42px 70px; }
  .gallery__heading { padding: 0; }
  .gallery h2 { font-size: 11cqw; -webkit-text-stroke: .4px #111; }
  .gallery__folders { width: 92%; gap: 1cqw; margin-top: 80px; }
  .folder__icon { width: 30cqw; height: 20cqw; }
  .folder__name { font-size: 3.4cqw; margin-top: 4cqw; }
  .gallery__viewer { position: relative; top: auto; margin-top: 35px; }
  .gallery__stage { height: 340px; margin: 0; overflow: hidden; }
  .gallery__heart { top: 140px; left: 1cqw; width: 9cqw; height: 9cqw; }
  .gallery__heart--right { left: auto; right: 1cqw; }
  .gallery__slide { --photo-height: 260px; width: min(72cqw,calc(var(--photo-height) * var(--ratio,1.333333))); top: 24px; border-radius: 12px; }
  .gallery__slide[data-offset="-1"],.gallery__slide[data-offset="1"] { --photo-height: 210px; top: 48px; opacity: 1; }
  .gallery__slide[data-offset="-1"] { left: 20%; }
  .gallery__slide[data-offset="1"] { left: 80%; }
  .gallery__slide[data-offset="-2"],.gallery__slide[data-offset="2"] { opacity: 0; }
  .gallery__viewer-top { position: relative; top: auto; left: auto; width: 90%; margin: 0 auto 20px; font-size: 11px; }
  .gallery__viewer-top span:nth-child(2) { font-size: 14px; }
  .gallery__controls { margin-top: 0; }
}
@media(min-width:481px) and (max-width:800px) {
  .about { min-height: 900px; }
  .about h2 em { font-size: 18cqw; top: 3cqw; }
  .about__description { top: 33%; }
  .about__copy p { font-size: 3.7cqw; }
  .about__portrait { max-height: 420px; }
}