/* Portrait layout (phones and tablets held upright: height >= width).
   The page runs the very same scroll engine as the desktop version — pinned
   stages, layers that assemble at the middle and pull apart again — only the
   stage is laid out top-to-bottom: copy first, artwork beneath it. Each
   artwork is re-composed for a 3:4 frame (see the block at the end). */

:root{
  /* the hero's geometry is written in --vhs (1 = 1vh on a 16:10 screen). On a
     portrait screen the widest headline line (~104 vhs) has to fit the width,
     so the unit is now taken from the width instead of the height */
  --vhs:.85vw;
  --gut:clamp(20px,5.8vw,64px);
}

/* ---------------- 01 cover ---------------- */
.hero .scene.cover{align-items:center}
.cover .pad{padding:0 0 12svh}
.hero-mark{left:50%;right:auto;top:auto;bottom:16svh;height:clamp(38px,10.5vw,78px);transform:translateX(-50%)}
.hero-wordmark{left:0;right:0;top:auto;bottom:10.4svh;text-align:center;font-size:clamp(12px,3.5vw,21px);line-height:1}
.scene.cover .scroll-cue{bottom:3.4svh;width:clamp(40px,11vw,60px);height:clamp(40px,11vw,60px);border-radius:10px;box-shadow:0 4px 0 rgba(255,255,255,.35)}
.scene.cover .scroll-cue:active{box-shadow:0 1px 0 rgba(255,255,255,.35);translate:0 3px}

/* the keycap sits in the right corner, clear of the logo stack */
.scene.cover .scroll-cue{left:auto;right:var(--gut);transform:none;bottom:4svh}

/* ---------------- 02 statement ---------------- */
.scene.tag .tag-head{top:50%;transform:translateY(-56%) scale(1)}

/* ---------------- 03 clients ---------------- */
.scene.clients{padding:11svh var(--gut) 9svh}
.clients-label{transform:translateY(-4.5svh);margin-bottom:3.6svh;font-size:clamp(.66rem,2.2vw,.85rem)}
.clients-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.9svh 6vw;max-width:640px}
.clients-grid .ln{font-size:clamp(.62rem,2.9vw,.98rem);line-height:1.3;overflow-wrap:anywhere}
@media (min-width:600px){
  .clients-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4svh 4vw;max-width:none}
  .clients-grid .ln{font-size:clamp(.78rem,2.1vw,1.15rem)}
}

/* ---------------- projects ---------------- */
.proj.pin .pin-stage{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  gap:clamp(6px,1.4svh,16px);
  padding:calc(clamp(18px,3.8svh,44px) + env(safe-area-inset-top)) var(--gut) calc(clamp(10px,2.4svh,28px) + env(safe-area-inset-bottom));
}
.proj.pin .p-copy{padding:0;align-self:start;height:auto}
.p-head{font-size:clamp(.82rem,2.9vw,1.14rem);gap:10px;justify-content:flex-start}
/* a short tick between the agency and the year, the year sitting right next to it */
.p-head .rule{flex:none;width:clamp(30px,10vw,88px)}
.p-copy h2{margin-top:clamp(9px,1.5svh,20px);font-size:clamp(1.58rem,6.6vw,3.24rem);line-height:1.15}
.p-copy .kind{margin-top:7px;font-size:clamp(.74rem,2.4vw,.96rem)}
.p-copy .desc{margin-top:clamp(9px,1.5svh,18px);font-size:clamp(.94rem,2.58vw,1.25rem);line-height:1.6;max-width:none}

/* the artwork is a window under the copy: layers rise into it from below and
   leave through its top edge without ever crossing the text */
.proj.pin .p-media.stack{
  height:100%;min-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.p-media.stack .frame{height:auto}
/* the window runs edge to edge (the frame stays inside the gutters), so drop
   shadows fade out naturally instead of being cut at the text margin */
.proj.pin .p-media.stack{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}

/* ---------------- Joule generator ---------------- */
.proj.pin .p-media.joule{
  height:100%;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
  background:transparent;
}
.joule-canvas{min-height:0;border-radius:14px}
.joule-controls{
  align-self:end;margin:10px 0 0;max-height:none;overflow:visible;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;border-radius:16px;
}
.joule-controls h3,.joule-controls .note{display:none}
.jc{padding:8px 11px 9px;border-radius:12px;min-width:0}
.jc-label{font-size:.7rem;margin-bottom:27px}
.jc-bubble{font-size:.66rem;padding:3px 7px}
.jc-range{display:none}
/* phones keep four sliders: no sway (출렁임) and no depth */
.joule-controls .jc:nth-of-type(1),.joule-controls .jc:nth-of-type(5){display:none}
.jc input[type=range]{height:5px;margin:4px 0;touch-action:none}
.jc input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:0}

/* ---------------- contact ---------------- */
.contact{min-height:100svh}
.contact .mark{height:clamp(52px,14vw,96px)}
.contact .c-name{font-size:clamp(1rem,4.4vw,1.5rem);margin-top:clamp(10px,1.6svh,18px)}
.contact .c-foot{bottom:7.5svh;font-size:clamp(.78rem,3.1vw,1.05rem);line-height:1.9}
.contact .c-foot a,.contact .c-foot span:not(.sep){display:block}
.contact .c-foot .sep{display:none}

/* ---------------- artwork compositions (3:4 frame) ---------------- */
#s-p16 .frame{--art-aspect:3/4 !important}
#s-p16 .cl:nth-child(1){left:-5.83% !important;top:3.6% !important;width:51.49% !important}
#s-p16 .cl:nth-child(2){left:73.88% !important;top:44.95% !important;width:36.32% !important}
#s-p16 .cl:nth-child(3){left:61.2% !important;top:6.86% !important;width:38.8% !important}
#s-p16 .cl:nth-child(4){left:-10.2% !important;top:57.56% !important;width:40% !important}
#s-p16 .cl:nth-child(5){left:47.6% !important;top:74.63% !important;width:43.87% !important}
#s-p16 .cl:nth-child(6){left:15.37% !important;top:74.63% !important;width:28.8% !important}
#s-p16 .cl:nth-child(7){left:60.17% !important;top:66.93% !important;width:34.57% !important}
#s-p16 .cl:nth-child(8){left:6.34% !important;top:31.91% !important;width:60.23% !important}
#s-p20 .frame{--art-aspect:3/4 !important}
#s-p20 .cl:nth-child(1){left:56.63% !important;top:6.11% !important;width:39.3% !important}
#s-p20 .cl:nth-child(2){left:9.72% !important;top:73.28% !important;width:34% !important}
#s-p20 .cl:nth-child(3){left:68.9% !important;top:53.8% !important;width:36% !important}
#s-p20 .cl:nth-child(4){left:-10.2% !important;top:47.46% !important;width:43.72% !important}
#s-p20 .cl:nth-child(5){left:37.89% !important;top:59.49% !important;width:49.01% !important}
#s-p20 .cl:nth-child(6){left:2.46% !important;top:2.29% !important;width:34% !important}
#s-p20 .cl:nth-child(7){left:11.15% !important;top:19.31% !important;width:65.13% !important}
#s-p17 .frame{--art-aspect:3/4 !important}
#s-p17 .cl:nth-child(1){left:29.12% !important;top:46.12% !important;width:66% !important}
#s-p17 .cl:nth-child(2){left:0% !important;top:66.57% !important;width:60% !important}
#s-p17 .cl:nth-child(3){left:-10.2% !important;top:1.72% !important;width:81.79% !important}
#s-p17 .cl:nth-child(4){left:75.71% !important;top:25.71% !important;width:30% !important}
#s-p18 .frame{--art-aspect:3/4 !important}
#s-p18 .cl:nth-child(1){left:23.72% !important;top:23.29% !important;width:86.83% !important}
#s-p18 .cl:nth-child(2){left:-5.74% !important;top:7.33% !important;width:54% !important}
#s-p18 .cl:nth-child(3){left:-10.2% !important;top:68.37% !important;width:29.29% !important}
#s-p18 .cl:nth-child(4){left:35.83% !important;top:61.58% !important;width:45.93% !important}
#s-p18 .cl:nth-child(5){left:76% !important;top:4.07% !important;width:24% !important}
#s-p18 .cl:nth-child(6){left:73.76% !important;top:52.58% !important;width:16% !important}
#s-p19 .frame{--art-aspect:3/4 !important}
#s-p19 .cl:nth-child(1){left:18.24% !important;top:10.02% !important;width:91.86% !important}
#s-p19 .cl:nth-child(2){left:0% !important;top:44.79% !important;width:56% !important}
#s-p19 .cl:nth-child(3){left:48% !important;top:58.32% !important;width:52% !important}
#s-p19 .cl:nth-child(4){left:11.25% !important;top:75.35% !important;width:42.39% !important}
#s-p12 .frame{--art-aspect:3/4 !important}
#s-p12 .cl:nth-child(1){left:44.13% !important;top:42.98% !important;width:69.01% !important}
#s-p12 .cl:nth-child(2){left:0% !important;top:0% !important;width:28% !important}
#s-p12 .cl:nth-child(3){left:36% !important;top:10.95% !important;width:28% !important}
#s-p12 .cl:nth-child(4){left:72% !important;top:2.14% !important;width:28% !important}
#s-p12 .cl:nth-child(5){left:-10.2% !important;top:35.48% !important;width:49.69% !important}
#s-p12 .cl:nth-child(6){left:-3.71% !important;top:81.36% !important;width:30% !important}
#s-p12 .cl:nth-child(7){left:12.5% !important;top:66.72% !important;width:40% !important}
#s-p12 .cl:nth-child(8){left:52.5% !important;top:40.93% !important;width:12.35% !important}
#s-p12 .cl:nth-child(9){left:74.9% !important;top:46.7% !important;width:14.1% !important}
#s-p12 .cl:nth-child(10){left:44.13% !important;top:62.35% !important;width:16.74% !important}
#s-p12 .cl:nth-child(11){left:70.34% !important;top:67.85% !important;width:18.66% !important}
#s-p12 .cl:nth-child(12){left:58.8% !important;top:81.36% !important;width:16.56% !important}
#s-p13 .frame{--art-aspect:3/4 !important}
#s-p13 .cl:nth-child(1){left:47.65% !important;top:29.9% !important;width:70% !important}
#s-p13 .cl:nth-child(2){left:5% !important;top:4.89% !important;width:38% !important}
#s-p13 .cl:nth-child(3){left:2% !important;top:2.33% !important;width:38% !important}
#s-p13 .cl:nth-child(4){left:47.6% !important;top:26.56% !important;width:26% !important}
#s-p13 .cl:nth-child(5){left:-5.03% !important;top:27.75% !important;width:38.01% !important}
#s-p13 .cl:nth-child(6){left:10.68% !important;top:46.79% !important;width:32.32% !important}
#s-p13 .cl:nth-child(7){left:68.82% !important;top:9.77% !important;width:13.83% !important}
#s-p13 .cl:nth-child(8){left:40% !important;top:48.22% !important;width:23.89% !important}
#s-p13 .cl:nth-child(9){left:-7.13% !important;top:59.04% !important;width:31.13% !important}
#s-p13 .cl:nth-child(10){left:-0.16% !important;top:81.45% !important;width:35.57% !important}
#s-p07 .frame{--art-aspect:3/4 !important}
#s-p07 .cl:nth-child(1){left:38% !important;top:9% !important;width:62% !important}
#s-p07 .cl:nth-child(2){left:38% !important;top:9% !important;width:62% !important}
#s-p07 .cl:nth-child(3){left:38% !important;top:9% !important;width:62% !important}
#s-p07 .cl:nth-child(4){left:38% !important;top:9% !important;width:62% !important}
#s-p07 .cl:nth-child(5){left:0% !important;top:34.61% !important;width:32.52% !important}
#s-p07 .cl:nth-child(6){left:4.99% !important;top:69.75% !important;width:30.12% !important}
#s-p07 .cl:nth-child(7){left:10.74% !important;top:48.25% !important;width:32.52% !important}
#s-p10 .frame{--art-aspect:3/4 !important}
#s-p10 .cl:nth-child(1){left:28.52% !important;top:3.81% !important;width:71.52% !important}
#s-p10 .cl:nth-child(2){left:28.52% !important;top:3.81% !important;width:71.52% !important}
#s-p10 .cl:nth-child(3){left:28.52% !important;top:3.81% !important;width:71.52% !important}
#s-p10 .cl:nth-child(4){left:0% !important;top:33.2% !important;width:32% !important}
#s-p10 .cl:nth-child(5){left:0% !important;top:51.7% !important;width:32% !important}
#s-p10 .cl:nth-child(6){left:0% !important;top:70.1% !important;width:32% !important}
#s-p04 .frame{--art-aspect:3/4 !important}
#s-p04 .p-media.stack .cl.slot1{left:0%;top:0.75%;width:84%}
#s-p04 .p-media.stack .cl.slot2{left:8%;top:28.50%;width:84%}
#s-p04 .p-media.stack .cl.slot3{left:16%;top:57.00%;width:84%}
#s-p05 .frame{--art-aspect:3/4 !important}
#s-p05 .p-media.stack .cl.slot1{left:0%;top:0.75%;width:84%}
#s-p05 .p-media.stack .cl.slot2{left:8%;top:28.50%;width:84%}
#s-p05 .p-media.stack .cl.slot3{left:16%;top:57.00%;width:84%}

/* ---------------- touch + short screens ---------------- */
/* a canvas that swallows swipes would stop the page from scrolling */
.joule-canvas{position:relative}
.joule-canvas iframe{pointer-events:none}
/* an ordinary element above the frame, so a swipe that starts on the render scrolls the page (iOS lets a frame swallow it otherwise) */
.joule-canvas::after{content:"";position:absolute;inset:0;z-index:2;touch-action:pan-y}
button,a{-webkit-tap-highlight-color:transparent}
@media (max-height:720px){
  .p-copy h2{font-size:clamp(1.38rem,6vw,1.92rem)}
  .p-copy .desc{font-size:.89rem;line-height:1.5}
  .proj.pin .pin-stage{padding-top:calc(14px + env(safe-area-inset-top))}
  .p-head{font-size:.79rem}
}

/* editor additions */
#s-p16 .cl:nth-child(1){z-index:10 !important}
#s-p16 .cl:nth-child(2){z-index:20 !important}
#s-p16 .cl:nth-child(3){z-index:40 !important}
#s-p16 .cl:nth-child(4){z-index:50 !important}
#s-p16 .cl:nth-child(5){z-index:60 !important}
#s-p16 .cl:nth-child(6){z-index:30 !important}
#s-p16 .cl:nth-child(7){z-index:70 !important}
#s-p16 .cl:nth-child(8){z-index:80 !important}
#s-p19 .cl:nth-child(1){z-index:30 !important}
#s-p19 .cl:nth-child(2){z-index:10 !important}
#s-p19 .cl:nth-child(3){z-index:20 !important}
#s-p19 .cl:nth-child(4){z-index:40 !important}