/* Sanvi Walke portfolio — every page is a 2560x1600 Figma frame scaled to fit the viewport. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #fff;
}

body {
  color: #000;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { display: block; max-width: none; }

.viewport {
  display: none;
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  background: #fff;
}
.slide {
  position: relative;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2560px;
  height: 1600px;
  overflow: hidden;
  background: #fff;
  transform: translate(-50%, -50%) scale(var(--s, 0.5));
  transform-origin: center center;
}

.abs { position: absolute; }
.rel { position: relative; }
.fill { width: 100%; height: 100%; }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
video.cover { pointer-events: auto; background: #fff; }
.tile { display: block; }
.tile:hover { outline: 4px solid #000; outline-offset: -4px; }

/* ---- Navigation (Figma component "asd") ----
   Desktop: a fixed header, scaled like the stage and positioned by site.js to sit exactly
   where the nav lives in each Figma frame, so it stays put while sections scroll under it. */
.header {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 2560px;
  height: 130px;
  transform: scale(var(--s, 0.5));
  transform-origin: 0 0;
  background: #fff;
  z-index: 10;
  pointer-events: none;
}
.header .nav a, .header .nav span { pointer-events: auto; }
.nav {
  position: absolute;
  top: 0;
  width: 2552px;
  height: 130px;
}
.nav a, .nav span {
  position: absolute;
  top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: Bahnschrift, Barlow, "Helvetica Neue", Arial, sans-serif;
  font-size: 48px;
  line-height: normal;
  white-space: nowrap;
  color: #000;
}
.nav .home  { left: 1469px; }
.nav .work  { left: 1735px; }
.nav .bio   { left: 2004px; }
.nav .other { left: 2216px; }

/* ---- Previous / next page triangles ---- */
.arrow {
  position: absolute;
  top: 1470px;
  width: 188px;
  height: 65px;
  display: block;
}
.arrow.prev { left: 64px; }
.arrow.next { left: 2308px; transform: rotate(180deg); }
/* The triangle bobs downward (its parent is rotated 180deg, so negative Y is visually down);
   the link's hit area stays still, and the motion pauses while hovered. */
.arrow.next img { animation: bob-down 1.5s ease-in-out infinite; }
.arrow.next:hover img, .arrow.next:focus-visible img { animation-play-state: paused; }
@keyframes bob-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-26px); }
}
@keyframes bob-down-img {
  0%, 100% { transform: rotate(180deg) translateY(0); }
  50%      { transform: rotate(180deg) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .arrow.next, .m-arrows .next img { animation: none !important; }
}
.arrow img {
  position: absolute;
  top: 0;
  left: 6.7%;
  width: 86.6%;
  height: 75%;
}

/* ---- Typography ---- */
.h1 {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 80px;
  line-height: normal;
  word-break: break-word;
}
.body {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 55px;
  word-break: break-word;
}
.body.light  { font-weight: 300; }
.body.medium { font-weight: 500; }
.b { font-weight: 700; }

.inter {
  font-family: Inter, sans-serif;
  font-weight: 400;
  word-break: break-word;
}

.mono {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 55px;
  line-height: normal;
  word-break: break-word;
}
.mono.semi { font-weight: 600; }

.bahn {
  font-family: Bahnschrift, Barlow, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: normal;
  word-break: break-word;
}
.bahn .light { font-weight: 300; }

/* =====================================================================
   Mobile / narrow layout
   ===================================================================== */
.m {
  display: block;
  color: #000;
  background: #fff;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
.m-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 24px;
}
.m-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  margin: 0 -20px;
  display: flex;
  justify-content: flex-end;
  gap: clamp(10px, 4vw, 32px);
  padding: 18px 20px 22px;
  font-family: Bahnschrift, Barlow, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(15px, 4.4vw, 20px);
  line-height: 1;
}
.m-nav a, .m-nav span { padding: 6px 2px; }
.m-nav a:hover, .nav a:hover { opacity: .55; }
.nav a, .m-nav a { transition: opacity .15s ease; }
.nav a.active { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; }
.m-nav a.active { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.arrow img, .m-arrows a img { transition: filter .15s ease; }
.arrow:hover img, .m-arrows a:hover img { filter: brightness(.6); }
:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
.m-bleed { margin: 0 -20px; }

.m h1 {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.15;
  margin: 6px 0 18px;
  word-break: break-word;
}
.m p { margin: 0; }
.m-text p { font-size: 17px; line-height: 1.5; }
.m-text p + p { margin-top: 1em; }
.m-text.light p, .m-notes.light { font-weight: 300; }
.m-text.medium p { font-weight: 500; }
.m-text { margin: 20px 0; }
.m-quotes p { padding-left: 16px; border-left: 2px solid #000; }
.m-statement p { font-size: 18px; line-height: 1.5; }

.m-cover {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.fit {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.fit-inner {
  position: relative;
  transform-origin: 0 0;
}

.m-grid { display: grid; gap: 16px; margin: 20px 0; }
.m-top { margin-top: 4px; }
@media (min-width: 560px) {
  .m-grid-2 { grid-template-columns: 1fr 1fr; }
  .m-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .m-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.m-grid > * { min-width: 0; }
.m-card { margin: 0; min-width: 0; }
.m-card figcaption h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 12px 0 4px;
}
.m-card figcaption p { font-size: 17px; line-height: 1.45; }

.m-final { display: grid; gap: 20px; margin: 20px 0; }
@media (min-width: 560px) {
  .m-final { grid-template-columns: 1fr 1fr; align-items: center; }
}
.m-notes { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.5; }
.m-notes li + li { margin-top: 10px; }

.m-cols { display: grid; gap: 4px 24px; margin-top: 8px; }
@media (min-width: 560px) {
  .m-cols { grid-template-columns: 1fr 1fr; }
}
.m-mono {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 22px;
  margin: 24px 0 10px;
}
.m-bahn {
  font-family: Bahnschrift, Barlow, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
}
.m-bahn .light { font-weight: 300; }
.m-bahn .gap { margin-top: 12px; }

.m h1.m-bahn-title {
  font-family: Bahnschrift, Barlow, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 5.5vw, 28px);
  line-height: 1.2;
  margin: 6px 0 16px;
}
.m-tile { display: block; }
.m-tiles { gap: 20px; }

.m-home-sub {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: clamp(12px, 3.6vw, 20px);
  margin: 6px 0 0;
}
.m-home-title {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: clamp(34px, 11.5vw, 76px);
  line-height: 1.1;
  margin: 0 0 22px;
}

.m-arrows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0 8px;
}
.m-arrows a { display: block; width: 68px; height: 24px; padding: 8px 0; box-sizing: content-box; }
.m-arrows a img { width: 100%; height: 100%; }
.m-arrows .next img { transform: rotate(180deg); animation: bob-down-img 1.5s ease-in-out infinite; }
.m-arrows .next:hover img { animation-play-state: paused; }
.m-section { scroll-margin-top: 64px; } /* clear the sticky nav when jumping to a section */
.m-section + .m-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid #e6e6e6; }
.m-arrows span { width: 68px; }

/* Desktop: exact Figma stage on landscape screens big enough to read it; stacked layout otherwise */
@media (min-width: 1024px) and (min-height: 600px) and (orientation: landscape) {
  html, body { height: 100%; overflow: hidden; }
  .viewport { display: block; }
  .header { display: block; }
  .m { display: none; }
}