:root {
  color-scheme:dark;
  --pink:#ffd7dd;
  --cyan:#98e9f5;
  --yellow:#f1ff53;
  --ruler:25px;
  font-family:'Clarity City',Arial,Helvetica,sans-serif;
  background:#000;
  color:#fff
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  overflow:hidden
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

button,a,[tabindex] {
  outline-offset:6px
}

button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--cyan)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}

.skip-link {
  position:fixed;
  top:-80px;
  left:40px;
  z-index:100;
  background:#000;
  padding:15px
}

.skip-link:focus {
  top:35px
}

#portfolio {
  display:flex;
  width:100vw;
  height:100dvh;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  touch-action:pan-x
}

#portfolio::-webkit-scrollbar {
  display:none
}

.panel {
  position:relative;
  flex:0 0 100vw;
  height:100%;
  overflow:hidden
}

.home {
  flex-basis:100vw
}

.signature {
  position:absolute;
  left:1.5%;
  top:6%;
  width:13%;
  height:14%
}

.signature img {
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.45)
}

.language {
  position:fixed;
  top:8.2%;
  right:3.2%;
  z-index:30;
  background:none;
  border:0;
  color:var(--yellow);
  font-size:20px;
  cursor:pointer
}

.intro {
  position:absolute;
  top:22%;
  left:23.5%;
  width:53%;
  text-align:center;
  font-size:clamp(14px,1.82vw,25px);
  line-height:1.17;
  font-weight:400
}

.intro>span {
  display:block;
  opacity:0;
  transform:translateY(8px)
}

.intro strong {
  font-weight:700
}

.cyan {
  color:var(--cyan)
}

.pink {
  color:#f7aee5
}

.yellow {
  color:var(--yellow)
}

.bubbles {
  position:absolute;
  inset:0;
  pointer-events:none
}

.bubble {
  position:absolute;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  pointer-events:auto;
  will-change:transform
}

.bubble img {
  position:absolute;
  inset:-9%;
  width:118%;
  height:118%;
  object-fit:contain;
  pointer-events:none
}

.bubble span {
  position:relative;
  color:var(--pink);
  font-size:clamp(11px,1.55vw,22px);
  font-weight:700;
  text-align:center;
  line-height:1.12
}

.bubble.about span,.bubble.projects span {
  font-size:clamp(17px,2vw,29px)
}

.skills {
  width:12.3%;
  left:0.5%;
  bottom:2%
}

.about {
  width:22.8%;
  left:12.8%;
  bottom:2%
}

.empty {
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  width:13.6%;
  left:35.3%;
  bottom:2%
}

.location {
  width:17%;
  left:49%;
  bottom:2%
}

.contact {
  width:13.8%;
  left:64.3%;
  bottom:15.5%
}

.projects {
  width:22.5%;
  left:77.5%;
  bottom:2%
}

.bubble:hover span {
  color:#fff
}

.bubble:hover img {
  filter:brightness(1.1)
}

.bubble.is-popping {
  pointer-events:none
}

.burst-piece {
  position:fixed;
  pointer-events:none;
  z-index:50;
  object-fit:fill
}

.collage-stage {
  position:absolute;
  inset:0
}

.collage-image {
  position:absolute;
  object-fit:cover;
  transform-origin:center;
  will-change:transform;
  visibility:hidden
}

.c1 {
  left:2%;
  top:46%;
  width:15%;
  height:23%;
  z-index:3
}

.c2 {
  left:14.5%;
  top:34%;
  width:18%;
  height:29%;
  z-index:2
}

.c3 {
  left:34%;
  top:46%;
  width:12%;
  height:21%;
  z-index:2
}

.c4 {
  left:26%;
  top:55%;
  width:17%;
  height:17%;
  z-index:4
}

.c5 {
  left:41%;
  top:22%;
  width:26%;
  height:47%;
  z-index:5
}

.c6 {
  left:68%;
  top:47%;
  width:13%;
  height:22%;
  z-index:6
}

.c7 {
  left:77%;
  top:39%;
  width:17%;
  height:24%;
  z-index:7
}

.collage h2 {
  position:absolute;
  right:7%;
  bottom:6%;
  font-size:clamp(28px,4.5vw,64px);
  font-weight:300;
  margin:0;
  letter-spacing:-1px
}

.collage h2 span {
  color:var(--pink)
}

.project-panel {
  flex-basis:165vw;
  display:flex;
  align-items:center;
  padding:7vh 3vw 5vh
}

.project-strip {
  display:flex;
  gap:3vw;
  width:100%;
  height:100%;
  align-items:center
}

.project-card {
  position:relative;
  flex:1;
  height:min(70vh,38vw);
  min-width:0;
  overflow:hidden;
  background:#191919
}

.project-cover {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s
}

.project-card:hover .project-cover {
  transform:scale(1.025)
}

.project-card.maeve .project-cover {
  object-position:35% center
}

.project-card.rose .project-cover {
  filter:none
}

.project-name {
  position:absolute;
  top:12%;
  left:8%;
  font-size:clamp(22px,3vw,46px);
  font-weight:400;
  margin:0
}

.maeve .project-name {
  font-weight:300;
  letter-spacing:-2px
}

.rose .project-name {
  top:43%;
  left:0;
  width:100%;
  text-align:center;
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:700
}

.project-name small {
  display:block;
  font-family:Arial,sans-serif;
  font-style:normal;
  font-size:14px;
  font-weight:400
}

.tag {
  position:absolute;
  font-size:clamp(9px,.85vw,13px);
  border:1px solid #ffffff80;
  border-radius:20px;
  padding:3px 8px;
  line-height:1;
  white-space:nowrap;
  animation:float 7s ease-in-out infinite alternate
}

.tag.t1 {
  right:17%;
  top:9%;
  animation-delay:-2s
}

.tag.t2 {
  left:9%;
  top:36%;
  animation-delay:-5s
}

.tag.t3 {
  right:8%;
  top:41%
}

.tag.t4 {
  left:10%;
  bottom:26%;
  animation-delay:-3s
}

.tag.t5 {
  right:20%;
  bottom:27%;
  animation-delay:-1s
}

.project-open {
  position:absolute;
  right:5%;
  bottom:9%;
  display:flex;
  gap:10px;
  align-items:center;
  background:none;
  border:0;
  border-bottom:1px solid transparent;
  color:#fff;
  font-size:12px;
  cursor:pointer;
  padding:8px 0
}

.project-open:hover {
  border-color:#fff
}

.project-open img {
  width:32px;
  height:25px
}

.information {
  display:flex;
  align-items:center;
  padding:9vw;
  gap:10vw
}

.information h2 {
  font-size:clamp(45px,7vw,100px);
  font-weight:400;
  color:var(--pink);
  margin:15px 0 35px
}

.eyebrow {
  font-size:12px;
  letter-spacing:2px
}

.skill-list {
  list-style:none;
  padding:0;
  font-size:clamp(18px,2vw,30px);
  line-height:1.65
}

.experience {
  max-width:290px;
  font-size:23px;
  line-height:1.4
}

.contact-panel>div {
  z-index:1
}

.back-home {
  display:inline-block;
  margin-top:45px;
  border-bottom:1px solid var(--pink);
  padding-bottom:8px
}

.contact-ring {
  position:absolute;
  width:46%;
  right:2%;
  bottom:8%;
  opacity:.8
}

.ruler {
  position:fixed;
  z-index:40;
  touch-action:none;
  color:#ffffff70;
  user-select:none;
  overflow:hidden;
  background:#000;
  cursor:crosshair
}

.ruler-top {
  top:0;
  left:var(--ruler);
  right:0;
  height:var(--ruler);
  background:repeating-linear-gradient(90deg,#ffffff45 0 1px,transparent 1px 10px) top left/100% 7px no-repeat #000
}

.ruler-left {
  top:var(--ruler);
  left:0;
  bottom:0;
  width:var(--ruler);
  background:repeating-linear-gradient(0deg,#ffffff45 0 1px,transparent 1px 10px) bottom left/7px 100% no-repeat #000
}

.ruler-number {
  position:absolute;
  font:7px Arial;
  pointer-events:none
}

.ruler-top .ruler-number {
  top:12px
}

.ruler-left .ruler-number {
  left:12px;
  writing-mode:vertical-rl
}

.guide {
  position:fixed;
  z-index:45;
  touch-action:none;
  background:transparent;
  border:0;
  padding:0
}

.guide::after {
  content:'';
  position:absolute;
  background:#F47A93
}

.guide.x {
  top:25px;
  bottom:0;
  width:13px;
  cursor:ew-resize
}

.guide.x::after {
  left:6px;
  top:0;
  width:1px;
  height:100%
}

.guide.y {
  left:25px;
  right:0;
  height:13px;
  cursor:ns-resize
}

.guide.y::after {
  top:6px;
  left:0;
  height:1px;
  width:100%
}

.guide:focus-visible {
  outline:1px dashed var(--pink)
}

dialog {
  width:min(1000px,90vw);
  max-height:88dvh;
  background:#080808;
  border:1px solid #ffffff45;
  color:#fff;
  padding:40px;
  overflow:auto
}

dialog::backdrop {
  background:#000c
}

.dialog-close {
  position:sticky;
  top:0;
  float:right;
  z-index:2;
  background:#000;
  border:1px solid #fff6;
  border-radius:50%;
  color:#fff;
  width:40px;
  height:40px;
  font-size:27px;
  cursor:pointer
}

dialog h2 {
  font-size:36px;
  font-weight:400;
  color:var(--pink)
}

dialog p {
  line-height:1.5;
  max-width:650px
}

.detail-images {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:30px
}

.detail-images img {
  width:100%;
  height:auto;
  object-fit:contain
}

.detail-images img:first-child {
  grid-column:1/-1;
  max-height:65vh
}

.noscript {
  position:fixed;
  bottom:0;
  background:#000;
  padding:5px;
  font-size:12px
}

@keyframes float {
  from {
  transform:translateY(-2px)
}

to {
  transform:translateY(2px)
}


}

@media(max-width:700px) {
  :root {
  --ruler:20px
}

.signature {
  left:3%;
  top:6%;
  width:27%;
  height:13%
}

.language {
  top:7%;
  font-size:15px
}

.intro {
  left:11.5%;
  top:22%;
  width:77%;
  font-size:clamp(13px,3.4vw,19px);
  line-height:1.35
}

.intro>span {
  display:inline
}

.bubble span {
  font-size:10px
}

.bubble.about span,.bubble.projects span {
  font-size:14px
}

.skills {
  width:20%;
  left:5%;
  bottom:4%
}

.about {
  width:35%;
  left:20%;
  bottom:13%
}

.empty {
  width:20%;
  left:33%;
  bottom:2%
}

.location {
  width:27%;
  left:52%;
  bottom:3%
}

.contact {
  width:23%;
  left:62%;
  bottom:24%
}

.projects {
  width:34%;
  left:72%;
  bottom:9%
}

.collage h2 {
  font-size:34px;
  bottom:10%
}

.c1 {
  left:5%;
  top:37%;
  width:27%;
  height:18%
}

.c2 {
  left:17%;
  top:26%;
  width:29%;
  height:20%
}

.c3 {
  left:38%;
  top:43%;
  width:20%;
  height:14%
}

.c4 {
  left:24%;
  top:54%;
  width:28%;
  height:13%
}

.c5 {
  left:43%;
  top:22%;
  width:40%;
  height:37%
}

.c6 {
  left:61%;
  top:57%;
  width:25%;
  height:18%
}

.c7 {
  left:77%;
  top:43%;
  width:25%;
  height:17%
}

.project-panel {
  flex-basis:282vw;
  padding:8vh 6vw
}

.project-strip {
  gap:6vw
}

.project-card {
  height:65vh
}

.tag {
  font-size:10px
}

.project-name {
  font-size:32px
}

.information {
  padding:12vw;
  display:block;
  padding-top:19vh
}

.information h2 {
  font-size:48px
}

.experience {
  font-size:18px
}

.contact-ring {
  width:70%;
  right:-12%;
  bottom:6%
}

.detail-images {
  grid-template-columns:1fr
}

dialog {
  padding:24px
}

.ruler-number {
  font-size:6px
}


}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

.intro>span {
  opacity:1;
  transform:none
}

.collage-image {
  will-change:auto
}


}



.collage {
  flex-basis:180vw
}

.collage-stage {
  width:100vw;
  right:auto
}

.project-name {
  animation:float 8s ease-in-out infinite alternate
}

.project-card.maeve .project-cover {
  object-position:center
}



.project-panel {
  flex-basis:300vw;
  padding:0
}

.project-strip {
  gap:0;
  height:100%
}

.project-card {
  flex:0 0 100vw;
  height:100dvh
}

.project-name {
  font-size:clamp(28px,4.2vw,64px)
}

.tag {
  font-size:clamp(12px,1.8vw,38px);
  padding:6px 13px;
  animation-name:project-drift;
  animation-duration:22s;
  animation-timing-function:ease-in-out
}

.project-open {
  font-size:clamp(13px,1.9vw,40px);
  transition:color .25s,border-color .25s
}

.project-open:hover,.project-open:focus-visible { color:#F47A93; border-color:#F47A93; }
.project-arrow { width:clamp(32px,3.4vw,65px); height:auto; }
.maeve .project-name { left:5.8%; top:8.3%; width:19.7%; }
.maeve .project-name img { display:block; width:100%; height:auto; }
.rose .project-name { top:8%; left:4.5%; width:26%; }
.rose .project-name img { width:100%; display:block; height:auto; }
.on-project-cover .ruler,.on-project-cover #guides { visibility:hidden; pointer-events:none; }
@keyframes project-drift {
  0% { transform:translate(-10px,-6px); }
  35% { transform:translate(13px,9px); }
  70% { transform:translate(-6px,15px); }
  100% { transform:translate(10px,-9px); }
}


.bubble.extra-left{width:17.6%}
.bubble.extra-right{width:10.5%}
@media(max-width:700px){.bubble.extra-left{width:24%}.bubble.extra-right{width:14%}}
.bubble.location{padding:0;border:0;background:transparent;cursor:default}
.bubble.location:hover span{color:var(--pink)}
.bubble.location:hover img{filter:none}
.cria .tag.t1{left:40%;right:auto;top:26%}
.contact-page{background:black;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.contact-content{position:relative;z-index:2;text-align:center;margin-top:-30px;padding:30px;pointer-events:none}
.contact-content h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,5.5vw,88px);font-weight:400;line-height:1.1;letter-spacing:-2px;margin:0 0 70px;color:#ffd7dd}
.contact-content h2 em{font-weight:400}
.contact-name{font-size:clamp(18px,1.6vw,25px);margin:0 0 10px}
.contact-email{display:block;font-size:clamp(17px,1.5vw,24px);pointer-events:auto}.contact-email[hidden],.contact-socials[hidden]{display:none}
.contact-socials{display:flex;justify-content:center;gap:20px;margin-top:42px;pointer-events:auto}.contact-socials a{border:1px solid #ffffff80;border-radius:40px;padding:6px 13px;font-size:15px}.contact-socials a:hover,.contact-email:hover{color:#F47A93}
.contact-navigation{position:absolute;top:55px;right:5%;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-size:16px}.contact-navigation a:hover{color:#F47A93}.contact-navigation a[aria-current]::before{content:'• '}
.contact-clock{position:absolute;bottom:40px;left:5%;z-index:2;display:flex;flex-direction:column;gap:5px;font:14px/1.4 monospace;color:white}
.contact-bubble-rain{position:absolute;inset:0;pointer-events:none;z-index:1}
.contact-falling-bubble{position:absolute;top:-250px;width:var(--size);height:var(--size);animation:contact-bubble-fall var(--duration) linear infinite;animation-delay:var(--delay);will-change:transform;opacity:.8}
@keyframes contact-bubble-fall{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(var(--drift),calc(100dvh + 500px)) rotate(100deg)}}
.contact-page:not(.contact-active) .contact-falling-bubble{animation-play-state:paused}
@media(max-width:700px){.contact-content h2{letter-spacing:-1px;margin-bottom:45px}.contact-navigation{top:50px;right:7%;font-size:14px}.contact-clock{left:8%;bottom:35px;font-size:12px}.contact-socials{gap:10px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.contact-falling-bubble{animation:none;top:auto;bottom:-35px;opacity:.25}}
.contact-falling-bubble{pointer-events:auto;padding:0;border:0;background:transparent;cursor:pointer}
.contact-falling-bubble img{display:block;width:100%;height:100%;object-fit:contain}
.contact-falling-bubble:focus-visible{outline:2px solid #F47A93;outline-offset:4px;border-radius:50%}
.contact-falling-bubble:disabled{pointer-events:none}
body:has(#contact.contact-active) .language{left:5%;right:auto}
.contact-clock{font-family:'Clarity City',Arial,sans-serif;font-size:14px;font-weight:400}
@media(max-width:700px){body:has(#contact.contact-active) .language{left:8%;right:auto}.contact-clock{font-size:12px}}
.maeve .tag,.maeve .project-name{display:none}
.maeve .project-open{font-size:clamp(13px,1.25vw,22px)}
.maeve .project-arrow{width:clamp(26px,2.4vw,42px)}
@font-face{font-family:Loverine;src:url('../font/Loverine.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
.contact-content h2{font-family:'Clarity City',Arial,sans-serif;font-weight:400;letter-spacing:-1px}
.contact-content h2 em{font-family:Loverine,cursive;font-style:normal;font-weight:400;letter-spacing:0}
.collage{flex-basis:500vw}
.collage-stage{width:100vw;height:100%;overflow:hidden}
.collage-image{object-fit:cover;transform-origin:center;will-change:transform;pointer-events:none}
.collage h2{color:#ffd7dd;font-size:clamp(28px,4vw,58px);right:6%;bottom:6%;z-index:1500}
@media(prefers-reduced-motion:reduce){.collage-image{will-change:auto}}
.contact-content h2{font-weight:300}
.collage-image{display:block;cursor:pointer;text-decoration:none}
.collage-media{display:block;width:100%;height:100%;object-fit:cover;transition:filter .2s}
.collage-image:hover .collage-media{filter:brightness(1.1)}
.collage-image:focus-visible{outline:2px solid #F47A93;outline-offset:5px}
.gallery-contact{position:absolute;right:6%;top:8%;z-index:1600;font-size:16px;color:#ffd7dd}
.gallery-contact:hover{color:#F47A93}
.gallery-scroll-hint{position:absolute;left:5%;bottom:5%;z-index:1600;font-size:12px;color:#b8b8b8;max-width:38%}
@media(max-width:700px){.gallery-contact{top:14%;font-size:14px}.gallery-scroll-hint{font-size:10px;max-width:40%}}
.contact-content h2{font-weight:200}
.project-roulette{position:absolute;left:9%;top:13.5%;height:120px;width:230px;overflow:hidden;z-index:1600;mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.project-roulette-track{transition:transform .4s cubic-bezier(.22,.75,.2,1);will-change:transform}
.project-roulette a{display:block;height:40px;line-height:40px;font-family:'Clarity City',Arial,sans-serif;font-size:clamp(18px,1.65vw,25px);font-weight:400;color:#383838;text-decoration:none;transition:color .3s}
.project-roulette a.is-current{color:#fff}
.project-roulette a:hover{color:#F47A93}
@media(max-width:700px){.project-roulette{left:9%;top:14%;height:96px;width:160px}.project-roulette a{height:32px;line-height:32px;font-size:18px}}
@media(prefers-reduced-motion:reduce){.project-roulette-track,.project-roulette a{transition:none}}
/* Size the high-resolution home logo to the marked area. */
.signature{left:5.3%;top:8%;width:10.5%;height:13%}
.signature img{transform:none;object-fit:contain}
@media(max-width:700px){.signature{left:6%;top:7%;width:22%;height:12%}}
.contact-socials a{transition:background-color .25s,border-color .25s,color .25s}
.contact-socials a[href*="linkedin.com"]:is(:hover,:focus-visible){background:#98e9f5;border-color:#98e9f5;color:#111}
.contact-socials a[href*="instagram.com"]:is(:hover,:focus-visible){background:#F47A93;border-color:#F47A93;color:#111}
/* Mobile home signature; desktop keeps its original artwork and placement. */
@media(max-width:700px){
  .signature{left:50%;top:7%;width:55%;height:12%;transform:translateX(-50%)}
  .signature picture{display:block;width:100%;height:100%}
}
/* Narrower mobile introduction and smaller, lower signature. */
@media(max-width:700px){
  .signature{left:50%;top:14.5%;width:43%;height:7%;transform:translateX(-50%)}
  .intro{left:18%;width:65%;top:22%}
}
/* Mobile home placement matched to the marked composition. */
@media(max-width:700px){
  .signature{left:50%;top:19%;width:30%;height:12%;opacity:0}
  .intro{left:20%;width:60%;top:35%;text-align:center}
  .language{right:12%;top:7%}
}
.mobile-work-menu,.mobile-project-names{display:none}
@media(max-width:700px){
  #portfolio{display:block;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;overscroll-behavior-y:contain}
  #portfolio>.panel{width:100vw;height:100dvh;min-height:100dvh}
  #portfolio>.collage{height:max(100dvh,220vw)}
  .collage-stage{width:100%;height:100%;transform:none!important}
  .collage .project-roulette,.collage .gallery-scroll-hint{display:none}
  .mobile-work-menu{display:flex;position:absolute;top:7%;right:9%;flex-direction:column;align-items:flex-end;gap:10px;font-size:14px;z-index:1500}
  .mobile-project-names{display:flex;position:absolute;left:10%;top:15%;flex-direction:column;gap:10px;font-size:18px;z-index:1500}
  .mobile-project-names a{color:#333;transition:color .25s}
  .mobile-project-names a.is-current{color:white}
  .collage-image{display:none!important}
  .collage-image.mobile-work-image{display:block!important;visibility:visible!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
  .collage-image:nth-of-type(1){left:37%!important;top:35%!important;width:53%!important;height:19%!important;z-index:6!important}
  .collage-image:nth-of-type(2){left:51%!important;top:29%!important;width:22%!important;height:15%!important;z-index:1!important}
  .collage-image:nth-of-type(3){left:29%!important;top:34%!important;width:26%!important;height:21%!important;z-index:2!important}
  .collage-image:nth-of-type(4){left:13%!important;top:48%!important;width:27%!important;height:19%!important;z-index:3!important}
  .collage-image:nth-of-type(10){left:38%!important;top:54%!important;width:39%!important;height:19%!important;z-index:5!important}
  .collage-image:nth-of-type(11){left:25%!important;top:63%!important;width:25%!important;height:13%!important;z-index:4!important}
  .collage h2{left:0;right:0;bottom:10%;text-align:center;font-size:28px}
  body.mobile-work-active .language{left:13%;right:auto;top:8%}
}
.collage-image>picture{display:block;width:100%;height:100%}
/* Only the project imagery scrolls vertically; the surrounding screen stays fixed. */
.mobile-image-scroll,.mobile-image-track{display:contents}
@media(max-width:700px){
  #portfolio{display:flex;overflow-x:auto;overflow-y:hidden;touch-action:pan-x}
  #portfolio>.panel,#portfolio>.collage{height:100dvh;min-height:100dvh;flex:0 0 100vw}
  .mobile-image-scroll{display:block;position:absolute;left:0;right:0;top:28%;bottom:20%;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:none}
  .mobile-image-scroll::-webkit-scrollbar{display:none}
  .mobile-image-track{display:block;position:relative;height:160%;min-height:620px}
  .collage-image:nth-of-type(1){top:15%!important}
  .collage-image:nth-of-type(2){top:2%!important}
  .collage-image:nth-of-type(3){top:12%!important}
  .collage-image:nth-of-type(4){top:39%!important}
  .collage-image:nth-of-type(10){top:50%!important}
  .collage-image:nth-of-type(11){top:69%!important}
}
@media(max-width:700px){
 .mobile-image-track .collage-image:nth-of-type(1){height:32%!important}
 .mobile-image-track .collage-image:nth-of-type(2){height:26%!important}
 .mobile-image-track .collage-image:nth-of-type(3){height:34%!important}
 .mobile-image-track .collage-image:nth-of-type(4){height:32%!important}
 .mobile-image-track .collage-image:nth-of-type(10){height:32%!important}
 .mobile-image-track .collage-image:nth-of-type(11){height:25%!important}
}
/* Finger-driven vertical orbit: the front image grows while the others recede. */
@media(max-width:700px){
 .mobile-image-scroll{top:27%;bottom:17%}
 .mobile-image-track{min-height:0}
 .mobile-image-track .collage-image.mobile-work-image{
   left:var(--mobile-x)!important;top:var(--mobile-y)!important;
   width:var(--mobile-width)!important;height:var(--mobile-height)!important;
   transform:translate(-50%,-50%) scale(var(--mobile-scale))!important;
   z-index:var(--mobile-layer)!important;opacity:var(--mobile-opacity)!important;
   will-change:transform,top,left
 }
}
/* Safari: allow the nested vertical gesture and keep each screen aligned. */
@media(max-width:700px){
 #portfolio{touch-action:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
 #portfolio>.panel{scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0}
 .mobile-image-scroll{touch-action:pan-y;-webkit-overflow-scrolling:touch}
 .language{padding:8px;min-width:40px;min-height:40px}
}
.mobile-orbit-view{display:contents}
@media(max-width:700px){
 .mobile-orbit-view{display:block;position:sticky;top:0;width:100%;height:var(--orbit-height);overflow:hidden;contain:layout paint}
 .mobile-orbit-view .collage-image.mobile-work-image{
   left:0!important;top:0!important;
   transform:translate3d(var(--mobile-x),var(--mobile-y),0) translate(-50%,-50%) scale(var(--mobile-scale))!important;
   will-change:transform;backface-visibility:hidden
 }
 .mobile-project-names{top:7%;left:10%}
 body.mobile-work-active .language{left:auto;right:7%;top:auto;bottom:max(4%,env(safe-area-inset-bottom))}
}