/* SUUSSTUDIO™ V4.5 · FIDELITY FIRST
   Native high-resolution photography is the source of truth.
   GPU effects may enhance imagery but never replace or soften it. */

/* High-fidelity image architecture */
.v4-photo>img,
.v4-photo>img.is-underlay,
.v4-founder img,
.v4-about-photo img,
.v4-world img,
.v4-ai-collective img,
.v45-github-proof img{
  opacity:1!important;
  filter:none!important;
  image-rendering:auto!important;
  backface-visibility:visible!important;
}

/* Never rasterize the source photograph through 3D transforms. Depth belongs to wrappers and light layers. */
.v4-photo>img,
.v4-world img,
.v4-founder img,
.v4-about-photo img,
.v4-ai-collective img{transform:none!important}

/* Distortion is an accent layer, never the actual photograph. */
.v4-photo>canvas{
  z-index:3!important;
  opacity:0!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
  transition:opacity .22s ease!important;
}
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .v4-photo:hover>canvas{opacity:.12!important}
  .v4-drone-stage:hover .v4-drone-image>canvas{opacity:.09!important}
}

/* Keep photography contrast through atmosphere without softening the source. */
.v4-work-scene>.v4-photo::after{
  background:linear-gradient(90deg,rgba(3,3,5,.78),rgba(3,3,5,.07) 48%,rgba(3,3,5,.02)),linear-gradient(0deg,rgba(3,3,5,.68),transparent 43%)!important;
}
.v4-ai-vignette{background:linear-gradient(180deg,rgba(3,3,5,.05),rgba(3,3,5,.08) 46%,rgba(3,3,5,.82)),linear-gradient(90deg,rgba(3,3,5,.5),transparent 23%,transparent 77%,rgba(3,3,5,.5))!important}

/* Source-aware layout. Never stretch a 480px/720px source beyond what it can honestly resolve. */
@media(min-width:761px){
  .v4-drone-stage{min-height:74vh!important;background:radial-gradient(circle at 72% 48%,rgba(112,208,213,.045),transparent 24%),linear-gradient(90deg,rgba(3,3,5,.92) 0 36%,rgba(3,3,5,.24) 58%,rgba(3,3,5,.48))!important}
  .v4-drone-image{
    width:min(640px,49vw)!important;
    height:min(72vh,760px)!important;
    margin-left:auto!important;
    margin-right:4vw!important;
    border-left:1px solid rgba(112,208,213,.12)!important;
    border-right:1px solid rgba(122,16,47,.16)!important;
  }
  .v4-ai-collective{
    left:50%!important;
    right:auto!important;
    width:min(640px,52vw)!important;
    transform:translateX(-50%) translateZ(-90px)!important;
  }
  .v4-world,.v4-world:nth-child(even){grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important}
  .v4-world img,.v4-world:nth-child(even) img{
    width:min(100%,440px)!important;
    height:auto!important;
    max-height:none!important;
    align-self:center!important;
  }
  .v4-world:nth-child(odd) img{justify-self:end!important}
  .v4-world:nth-child(even) img{justify-self:start!important}
}

/* PUBLIC BUILD PROOF · TOP OF EXPERIENCE */
.v45-github-proof{
  position:relative;
  min-height:min(82svh,820px);
  padding:clamp(112px,14vh,156px) clamp(20px,5vw,82px) clamp(76px,9vh,118px);
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:clamp(34px,7vw,110px);
  align-items:end;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 24%,rgba(112,208,213,.07),transparent 22%),
    radial-gradient(circle at 28% 74%,rgba(122,16,47,.16),transparent 28%),
    linear-gradient(180deg,#030304 0%,#050506 100%);
  border-bottom:1px solid rgba(255,255,255,.11);
}
.v45-github-proof::before{
  content:"";
  position:absolute;
  inset:8% 3%;
  border:1px solid rgba(255,255,255,.045);
  clip-path:polygon(0 0,72% 0,100% 29%,100% 100%,14% 100%,0 80%);
  pointer-events:none;
}
.v45-github-proof::after{
  content:"";
  position:absolute;
  width:42vw;height:42vw;right:-15vw;top:-15vw;
  border-radius:43% 57% 65% 35%/55% 42% 58% 45%;
  border:1px solid rgba(112,208,213,.12);
  box-shadow:inset 0 0 100px rgba(122,16,47,.09),0 0 120px rgba(112,208,213,.035);
  transform:rotate(24deg);
  pointer-events:none;
}
.v45-github-copy,.v45-github-side{position:relative;z-index:2}
.v45-github-eyebrow{margin:0 0 24px;font-size:.58rem;letter-spacing:.2em;color:#70d0d5;text-transform:uppercase}
.v45-github-copy h1{margin:0;max-width:9ch;font-size:clamp(4.7rem,8vw,10rem);line-height:.77;letter-spacing:-.07em;text-transform:uppercase}
.v45-github-copy h1 span{display:block;color:transparent;-webkit-text-stroke:1px rgba(245,240,233,.68)}
.v45-github-copy>p:last-of-type{max-width:58ch;margin:34px 0 0;color:rgba(245,240,233,.7);line-height:1.62;font-size:clamp(.98rem,1.2vw,1.18rem)}
.v45-github-side{display:grid;gap:22px;align-self:center}
.v45-github-status{display:grid;border-top:1px solid rgba(255,255,255,.13)}
.v45-github-status span{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:.58rem;letter-spacing:.15em;color:rgba(255,255,255,.66)}
.v45-github-link{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:20px 0;border-bottom:1px solid rgba(112,208,213,.62);font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:#f5f0e9}
.v45-github-link b{font-size:1.2rem;color:#70d0d5}
.v45-github-side small{color:rgba(255,255,255,.4);line-height:1.55}
.v45-github-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.55rem;letter-spacing:.06em;color:rgba(112,208,213,.66);padding-left:13px;border-left:1px solid rgba(122,16,47,.7)}

@media(max-width:760px){
  .v45-github-proof{min-height:auto;display:block;padding:94px 16px 72px}
  .v45-github-proof::after{width:82vw;height:82vw;right:-43vw;top:-21vw;opacity:.65}
  .v45-github-copy h1{font-size:clamp(4rem,18vw,6.5rem);max-width:8ch}
  .v45-github-copy>p:last-of-type{font-size:.96rem;max-width:31ch;margin-top:27px}
  .v45-github-side{margin-top:50px}
  .v45-github-status span{font-size:.52rem}
  .v45-github-link{font-size:.58rem}

  /* Native imagery only on coarse/touch. */
  .v4-photo>canvas{display:none!important;opacity:0!important}

  /* 480px archive collages stay below their native pixel ceiling on mobile. */
  .v4-world img,.v4-world:nth-child(even) img{
    width:min(360px,calc(100vw - 32px))!important;
    height:auto!important;
    max-height:none!important;
    margin-inline:auto!important;
  }
}