/* ============================================================
   Vishal K. — Portfolio · MOBILE
   ------------------------------------------------------------
   The desktop site is a fixed 1440px artboard: every element is
   absolutely positioned at Figma coordinates inside a .stage that
   carries transform:scale(--k), where --k = clientWidth / 1440.
   On a 390px phone --k is 0.271, so the whole design renders at
   27% and 16px copy paints at 4.3px.

   This sheet does NOT re-position that artboard at a smaller size.
   It returns the page to normal document flow and lays it out as a
   single column. The mechanism that makes that cheap: an element
   set to `position:static` ignores `left`/`top`, so the hundreds of
   inline `style="left:481px;top:219px"` declarations in the markup
   go inert on their own. Only inline `width`/`height` still bite,
   and those are the `!important` overrides below.

   Loaded AFTER style.css, so equal-specificity rules win without
   !important. Breakpoint is 768px — tablets get the desktop
   artboard, which reads fine at --k = 0.53 and up.
   ============================================================ */

@media (max-width: 768px){

/* ---------- page frame ---------- */
:root{
  --mg: 22px;          /* page gutter */
  --gap: 12px;         /* grid gutter */
}
html,body{ overflow-x:hidden }
body{ background:#000 }

/* Kill the artboard scaling wrapper. Everything below reflows. */
.stage-wrap{ height:auto !important; overflow:visible }
.stage{ position:static; width:auto; height:auto; transform:none }

/* The artboard promotes a lot of elements to their own compositor layer for
   the pinned cross-fades. With those timelines skipped nothing animates them
   any more, so the hint is pure cost — a layer per slide, on the device with
   the least memory to spare. */
.s2__text,.s2__card,.s2__card img,.s2 .line > span,
.s2__frame img,.s2__frame video,
.s4__slide,.s4__media,.s4__copy,.s4__panel,
.s6__frame,.s6__frame img,
.s3 .line > span,.s5 .line > span,.s7 .line > span,
.s8 .line > span,.s9 .line > span{
  will-change:auto;
}

/* A ground under every media box. The mobile page is ~14,800px tall and
   almost all of its imagery is loading="lazy", so on a phone there is always
   some frame whose image has not arrived yet. Against a pure-black section
   that reads as a broken void; against this it reads as a frame that is still
   filling. Videos get it too, for the moment before the poster paints. */
.s2__card,.s2__frame,.s3__media,.s4__media .s4__frame,
.s5__frame,.s6__block--deck .s6__frame,.s6__tile,
.s7__tile,.s8__card,.s9__card{
  background:#141414;
}

/* Shared reveal masks: the negative margin is cancelled by an equal
   padding, so the text origin is unmoved — safe to leave in flow.
   Headings are allowed to wrap now that they are no longer nowrap. */
.s2 .line,.s3 .line,.s5 .line,.s6 .line,.s7 .line,.s8 .line,.s9 .line{
  padding-right:14px;
}

/* Shared CTA pill — auto-width in flow instead of a fixed artboard box. */
.cta{
  position:static;
  display:inline-flex; align-items:center; gap:12px;
  width:auto !important; height:auto !important;
  padding:14px 20px;
  border-radius:7px;
}
.cta .label,.cta .arrow{ position:static }
.cta .label{ font-size:14px }
.cta .arrow{ flex:0 0 auto; width:10px; height:10px }

/* Section headings share one scale. */
.s2__heading,.s3__heading,.s4__heading,.s5__heading,
.s6__heading,.s7__heading,.s8__heading,.s9__heading{
  position:static;
  font-size:38px; line-height:43px;
  white-space:normal;
  margin:0 0 20px;
}

/* Intro paragraphs: the <br> tags are desktop line breaks — drop them
   and let the copy reflow to the column. */
.s4__intro br,.s5__intro br,.s7__intro br,.s8__intro br,
.s9__intro br,.s9__body br,.s3__body br,.s4__body br{ display:none }

.s4__intro,.s5__intro,.s7__intro,.s8__intro,.s9__intro{
  position:static;
  width:auto;
  margin:0 0 32px;
  font-size:15px; line-height:24px;
  text-align:left;
  white-space:normal;
  opacity:.72;
}

/* ============================================================
   NAV — a real fixed bar, not a 0.27-scaled pill.
   The backdrop sampler (initNavContrast) is skipped on mobile;
   the bar carries its own dark scrim so contrast is fixed over
   both the white hero and the black sections.
   ============================================================ */
.navlayer{ height:auto }
.navlayer__scale{
  position:fixed; left:0; top:0;
  width:100%; height:auto;
  transform:none;
  padding:10px var(--mg) 0;
}
.nav{
  position:relative; left:auto; top:auto;
  width:100%; height:auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px;
  border-radius:23px;
  background:rgba(12,12,12,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border-color:rgba(255,255,255,.15);
}
.nav a{ position:static; font-size:12.5px; color:#fff }
.nav a.is-on-dark{ color:#fff }

/* ============================================================
   HERO
   DOM order is already the mobile order once the three painted
   artboard layers (band / plate / veil) are removed:
     photo · headline · meta · cta · cats · wordmark · tagline · body
   The first five sit on white; the last three form the black block
   and each paints its own full-bleed #000 so they read as one slab.
   ============================================================ */
.hero{ position:static; height:auto; inset:auto; background:#fff }
.hero__band,.hero__plate,.hero__veil{ display:none }

/* Square crop. The source is a 1712x1254 cut-out with the subject
   spanning x 100-1450, so a square takes the middle 1254 and
   object-position 32% centres it on the subject rather than the
   frame — the empty right third is what gets cut. */
.hero__photo{
  position:static;
  width:100%; height:auto;
  aspect-ratio:1/1;
  overflow:hidden;
}
.hero__photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:32% center;
}

.hero__headline{
  position:static;
  margin:30px var(--mg) 0;
  font-size:27px; line-height:35px;
  white-space:normal;
}
.hero__headline .line{ margin-left:0; padding:0 6px 3px 0 }

.hero__meta{ position:static; width:auto; height:auto; margin:20px var(--mg) 0 }
.hero__meta p{
  position:static;
  font-size:11px; line-height:19px;
  letter-spacing:.08em;
  opacity:.55;
}

.hero__cta{
  position:static;
  display:inline-flex; align-items:center; gap:12px;
  width:auto; height:auto;
  margin:26px var(--mg) 0;
  padding:16px 22px;
}
.hero__cta .label,.hero__cta .arrow{ position:static }
.hero__cta .label{ font-size:14px }
.hero__cta .arrow{ flex:0 0 auto }

.hero__cats{
  position:static; width:auto; height:auto;
  margin:32px var(--mg) 0;
  padding-bottom:40px;
  display:flex; flex-wrap:wrap; gap:10px 20px;
}
/* :nth-child is needed to match the specificity of the artboard rules that
   paint labels 2-4 white — on the dark band they crossed on desktop. Here
   the whole row sits on white, so all four are ink. */
.hero__cats li:nth-child(n){
  position:static;
  top:auto;
  font-size:13px; line-height:13px;
  color:#000;
}

/* --- the black slab: four consecutive elements, each full-bleed --- */
.hero__wordmark,.hero__tagline,.hero__body{
  position:static;
  width:auto;
  background:#000;
  margin-left:0; margin-right:0;
  padding-left:var(--mg); padding-right:var(--mg);
}
.hero__wordmark{
  font-size:48px; line-height:56px;
  margin-top:0; padding-top:44px;
}
.hero__tagline{
  font-size:10px; line-height:16px;
  letter-spacing:1.5px;
  padding-top:14px;
  opacity:.6;
}
.hero__body{
  font-size:15px; line-height:25px;
  padding-top:24px;
  white-space:normal;
  opacity:.86;
}
.hero__body--b{ padding-bottom:52px }
.hero__body .line{ margin-left:0; padding-left:0; padding-right:0 }

/* ============================================================
   SECTION 2 — Brand Identities
   Desktop pins this and drives three slides horizontally off a
   360vh scroll range. On touch that fights the thumb, so the pin
   is dropped and the three slides simply stack as cards.
   The slides' opacity:0 resting state is authored for the
   cross-fade; with initSlides() skipped nothing ever turns it
   back on, hence the override.
   ============================================================ */
.s2{ height:auto; padding:76px 0 4px }
.s2__sticky{ position:static; height:auto; overflow:visible }
.s2__art{
  position:static;
  width:auto; height:auto;
  margin:0; transform:none; overflow:visible;
}
.s2__inner{ position:static }
.s2__heading{ margin:0 var(--mg) 34px }

.s2__slide{ position:static; margin:0 0 66px }
.s2__slide,.s2__slide[aria-hidden="true"]{ opacity:1; pointer-events:auto }

/* The card stays a positioned box: slide 2 layers a video over a
   still, and both must keep overlapping rather than stack in flow. */
.s2__card{
  position:relative;
  left:auto; top:auto;
  width:auto; height:auto;
  margin:0 var(--mg) 24px;
  aspect-ratio:16/11;
  border-radius:14px;
  overflow:hidden;
}
.s2__frame{
  position:absolute !important;
  left:0 !important; top:0 !important;
  width:100% !important; height:100% !important;
  border-radius:14px !important;
}
.s2__frame img,.s2__frame video,.s2__frame video.s2__fill{
  position:absolute !important;
  left:0 !important; top:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

.s2__text{ position:static; width:auto; height:auto; margin:0 var(--mg) }
.s2__title{
  position:static;
  font-size:31px; line-height:36px;
  white-space:normal;
  margin:0 0 12px;
}
.s2__tagline{
  position:static;
  font-size:16px; line-height:22px;
  margin:0 0 18px;
  opacity:.8;
}
.s2__body{
  position:static;
  font-size:15px; line-height:25px;
  white-space:normal;
  margin:0 0 24px;
  opacity:.86;
}
.s2__credits{
  position:static;
  font-size:11px; line-height:18px;
  white-space:normal;
  margin:22px 0 0;
}
.s2__slide--1 .s2__body,.s2__slide--3 .s2__tagline,.s2__slide--3 .s2__cta{
  top:auto; left:auto;
}

/* ============================================================
   SECTION 3 — Campaigns
   Two columns become two stacked blocks. The films are 9:16, so
   the frame keeps that ratio and is capped rather than run
   full-bleed — a 390-wide 9:16 box is 693px tall, most of a screen.
   ============================================================ */
.s3{ height:auto; padding:70px 0 44px }
.s3__art{ position:static; width:auto; height:auto; transform:none }
.s3__heading{ margin:0 var(--mg) 36px }
.s3__col{ position:static; inset:auto; pointer-events:auto; margin:0 0 58px }
.s3__media{
  position:static;
  width:auto; height:auto;
  max-width:290px;
  margin:0 auto 24px;
  aspect-ratio:9/16;
  border-radius:12px;
}
.s3__col--1 .s3__media,.s3__col--2 .s3__media{ left:auto }
.s3__title{
  position:static;
  margin:0 var(--mg) 10px;
  font-size:28px; line-height:32px;
}
.s3__subtitle{
  position:static;
  margin:0 var(--mg) 20px;
  font-size:15px; line-height:20px;
  opacity:.8;
}
.s3__body{
  position:static;
  margin:0 var(--mg) 16px;
  font-size:15px; line-height:24px;
  white-space:normal;
  opacity:.86;
}
.s3__cta{ margin:10px var(--mg) 0 }

/* ============================================================
   SECTION 4 — Social Media
   Unpinned like section 2. Each slide's collage of 206x274 tiles
   at artboard coordinates becomes what the work actually is: a
   social grid. The first frame is the slide's backdrop image and
   spans the row; the tiles that follow run three-up.
   Frames 8+ are dropped so the grid closes on a full row (six
   tiles) instead of leaving a two-tile orphan.
   ============================================================ */
.s4{ height:auto; padding:70px 0 34px }
.s4__sticky{ position:static; height:auto; overflow:visible }
.s4__art{
  position:static;
  width:auto; height:auto;
  margin:0; transform:none; overflow:visible;
}
.s4__inner,.s4__deck,.s4__stage{ position:static; inset:auto }
.s4__heading{ margin:0 var(--mg) 20px }
.s4__intro{ margin:0 var(--mg) 42px }

.s4__slide{ position:static; inset:auto; margin:0 0 62px }
.s4__slide,.s4__slide[aria-hidden="true"]{ opacity:1; pointer-events:auto }

.s4__media{
  position:static; inset:auto;
  margin:0 var(--mg) 24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.s4__media .s4__frame{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:auto !important;
  aspect-ratio:3/4;
  border-radius:6px !important;
  opacity:1 !important;
  transform:none !important;
}
.s4__media .s4__frame:first-child{
  grid-column:1 / -1;
  aspect-ratio:16/9;
  border-radius:12px !important;
  margin-bottom:4px;
}
.s4__media .s4__frame:nth-child(n+8){ display:none }
.s4__media .s4__frame img{
  position:absolute !important;
  left:0 !important; top:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
}

.s4__panel{ display:none }
.s4__copy{ position:static; inset:auto; margin:0 var(--mg) }
/* Sized by HEIGHT, not width. The four brand logos have four different
   aspect ratios and their images carry no width/height attributes, so a
   `height:auto` box measures 0 until the lazy image lands and the copy below
   jumps. A fixed height reserves the space up front and object-fit:contain
   keeps each logo's own proportions. */
.s4__copy .s4__logo{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:56px !important;
  margin:0 0 20px;
  overflow:visible;
}
.s4__copy .s4__logo img{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:100% !important;
  object-fit:contain !important;
  object-position:left center;
}
.s4__mark{ position:static; margin:0 0 14px; font-size:16px; line-height:20px }
.s4__body{
  position:static;
  margin:0 0 16px;
  font-size:15px; line-height:24px !important;
  white-space:normal;
  opacity:.86;
}

/* ============================================================
   SECTION 5 — Visual Exploration
   The square poster leads full-width; the two 9:16 posters sit
   beside each other under it. `order` puts the centre poster
   first — in the markup it is authored second.
   ============================================================ */
.s5{ height:auto; padding:70px 0 52px }
.s5__art{
  position:static;
  width:auto; height:auto;
  transform:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  padding:0 var(--mg);
}
.s5__heading{ grid-column:1 / -1; order:0 }
.s5__card{ display:none }
.s5__frame{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:auto !important;
  border-radius:10px;
  overflow:hidden;
}
.s5__frame img{
  position:absolute !important;
  left:0 !important; top:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
}
.s5__frame--c{ grid-column:1 / -1; order:1; aspect-ratio:1/1 }
.s5__frame--l{ order:2; aspect-ratio:276/491 }
.s5__frame--r{ order:3; aspect-ratio:276/491 }
.s5__intro{ grid-column:1 / -1; order:4; margin:20px 0 0 }
.s5__cta{ grid-column:1 / -1; order:5; justify-self:start; margin:0 }

/* ============================================================
   SECTION 6 — thumbnails deck + reel marquee
   The fanned five-card deck is a hover composition; on touch it
   becomes a grid with the hero frame leading. The marquee stays —
   it is the one piece of motion that reads better on a phone than
   on a desktop — at roughly half tile size.
   ============================================================ */
.s6{ height:auto; padding:6px 0 52px }
.s6__art{ position:static; width:auto; height:auto; transform:none }
.s6__block{ position:static; inset:auto; pointer-events:auto }

.s6__block--deck{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 var(--mg);
  margin-bottom:56px;
}
.s6__block--deck .s6__frame{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:auto !important;
  aspect-ratio:16/9;
  border-radius:8px !important;
  box-shadow:none;
  filter:none !important;
  transform:none !important;
  cursor:default;
}
.s6__block--deck .s6__frame[data-slot="hero"]{ grid-column:1 / -1; order:-1 }
.s6__block--deck .s6__frame img{
  position:absolute !important;
  left:0 !important; top:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
}
.s6__intro{ position:static; left:auto; margin:0 }
.s6__intro--a{ grid-column:1 / -1; order:1; margin:14px 0 0 }
.s6__cta--a{ grid-column:1 / -1; order:2; justify-self:start; margin:0 }

.s6__reels{
  position:relative;
  left:auto; top:auto;
  width:100%; height:auto;
  margin-bottom:26px;
}
.s6__track{ position:relative; height:auto }
.s6__tile{ width:152px; height:270px }
.s6__set > .s6__tile{ margin-right:14px }
.s6__intro--b{ margin:0 var(--mg) 20px }
.s6__cta--b{ margin:0 var(--mg) }

/* ============================================================
   SECTION 7 — The Logofolio
   Both marquee rows survive; only the tile pitch shrinks. The
   loop distance is measured from the DOM in main.js, so it stays
   seamless at whatever size the tiles end up.
   ============================================================ */
.s7{ height:auto; padding:66px 0 54px }
.s7__art{ position:static; width:auto; height:auto; transform:none }
.s7__heading{ margin:0 var(--mg) 16px }
.s7__intro{ margin:0 var(--mg) 34px }
.s7__row{ position:static; width:100%; height:auto; margin:0 0 14px }
.s7__row--1,.s7__row--2{ top:auto }
/* The track carries an authored inline `left:-175px` / `left:-46px` that
   phases the two rows against each other. That is an offset into a 1440
   artboard and, now that the track is positioned again, it would drag the
   row out of the gutter — the marquee's own x transform does the phasing. */
.s7__track{ position:relative; left:auto !important; gap:14px }
.s7__tile{ width:124px; height:124px }

/* ============================================================
   SECTION 8 — Image compositing
   The before/after split is expressed as a percentage clip rather
   than a pixel width so it survives the change of scale; main.js
   writes --split. The 'before' image keeps the artboard's
   deliberate non-uniform stretch, restated in percentages of the
   card (top -19.79/569, height 608.58/569 for card a).
   ============================================================ */
.s8{ height:auto; padding:66px 0 54px }
.s8__art{ position:static; width:auto; height:auto; transform:none }
.s8__heading{ margin:0 var(--mg) 16px }
.s8__intro{ margin:0 var(--mg) 32px }
.s8__card{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:auto !important;
  margin:0 var(--mg) 18px;
  border-radius:14px !important;
  cursor:ew-resize;
}
.s8__card[data-card="a"]{ aspect-ratio:456/569 }
.s8__card[data-card="b"]{ aspect-ratio:456/568 }
.s8__after{
  left:0 !important; top:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
}
/* .s8__before's WIDTH is the split and is written by main.js as a
   percentage — it must not be pinned here. Its image, though, has to stay
   the width of the CARD while that box narrows around it, and the card is
   exactly the viewport less the two gutters. */
.s8__card .s8__before img{
  left:0 !important;
  width:calc(100vw - (var(--mg) * 2)) !important;
}
.s8__card[data-card="a"] .s8__before img{ top:-3.478% !important; height:106.96% !important }
.s8__card[data-card="b"] .s8__before img{ top:-3.573% !important; height:107.14% !important }

/* ============================================================
   SECTION 9 — Print & Collateral
   The frosted panel exists to hold copy over the spread; in one
   column the copy sits below the image and the panel is dropped.
   ============================================================ */
.s9{ height:auto; padding:66px 0 58px }
.s9__art{ position:static; width:auto; height:auto; transform:none }
.s9__heading{ margin:0 var(--mg) 16px; font-size:36px; line-height:42px }
.s9__heading .amp{ font-size:24px }
.s9__intro{ margin:0 var(--mg) 30px }
.s9__card{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:auto !important;
  margin:0 var(--mg) 28px;
  aspect-ratio:16/10;
  border-radius:12px !important;
}
.s9__card img{
  position:absolute !important;
  left:0 !important; top:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
}
.s9__panel{ display:none }
/* Height-sized for the same reason as the section-4 logos. */
.s9__logo{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:74px !important;
  margin:0 var(--mg) 22px;
  overflow:visible;
}
.s9__logo img{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:100% !important;
  object-fit:contain !important;
  object-position:left center;
}
.s9__body{
  position:static;
  margin:0 var(--mg) 24px;
  font-size:15px; line-height:25px;
  white-space:normal;
  opacity:.86;
}
.s9__cta{ margin:0 var(--mg) }

/* ============================================================
   SECTION 10 — About
   The wash is a 60%-opacity #1A1A1A plate over black; in flow it
   would paint above the static copy, so it is replaced by the
   colour it resolves to.
   ============================================================ */
.s10{ height:auto }
.s10__art{
  position:static;
  width:auto; height:auto;
  transform:none;
  background:#101010;
  padding:60px var(--mg) 50px;
}
.s10__wash{ display:none }
.s10__label{
  position:static;
  left:auto;
  margin:0 0 20px;
  font-size:26px; line-height:30px;
}
.s10__label:not(:first-of-type){ margin-top:8px }
.s10__bio{
  position:static;
  left:auto;
  margin:0 0 48px;
  font-size:15px; line-height:26px;
  white-space:normal;
  opacity:.86;
}
.s10__job{
  position:static;
  left:auto;
  margin:0 0 5px;
  font-size:16px; line-height:23px;
  white-space:normal;
}
.s10__date{
  position:static;
  left:auto;
  margin:0 0 26px;
  font-size:13px; line-height:18px;
}
.s10__list{
  position:static;
  left:auto;
  margin:0;
  font-size:15px; line-height:31px;
  white-space:normal;
  opacity:.86;
}
.s10__list--2{ margin-top:0 }
.s10__link{
  position:static;
  top:auto;
  display:inline-block;
  margin:36px 24px 0 0;
  font-size:15px;
}
.s10__arrow{
  position:relative;
  left:auto !important;
  top:1px;
  margin-left:7px;
}
.s10__colophon{
  position:static;
  left:auto;
  margin:34px 0 0;
  font-size:13px; line-height:18px;
}

} /* end @media (max-width: 768px) */

/* ------------------------------------------------------------
   Small tablets and unfolded foldables in portrait (iPad mini at
   744, most foldables around 717) get the single-column layout
   too, but a 700px-wide column of 15px copy is bad typography.
   Growing the gutter caps the measure at 556px and centres it;
   every rule above is already expressed in var(--mg), and the
   full-bleed pieces — the portrait, the hero's black slab, the
   two marquees — stay edge to edge on purpose.
   ------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 768px){
  :root{ --mg: calc((100vw - 556px) / 2) }
}