.sdk-page .screen { isolation:isolate; }
.sdk-page #sdk,
.sdk-page .network-screen { display:block; min-height:540px; }

.sdk-page .brand-mark {
  position:absolute;
  z-index:0;
  width:min(80vw,112dvh);
  aspect-ratio:1;
  right:-21%;
  bottom:-43%;
  /* The image carries its own transparency; no CSS luminance mask is required. */
  background:transparent url('/assets/nunchi-mark-cream.svg') center / contain no-repeat;
  pointer-events:none;
}
.sdk-page .hero-copy {
  position:absolute;
  left:var(--gutter);
  top:9%;
  margin:0;
  width:60%;
}
.sdk-page h1 { font-size:clamp(72px,min(9.4vw,15dvh),176px); }
.sdk-page .intro { font-size:clamp(20px,1.75vw,28px); margin-top:28px; }

.strings-art {
  position:absolute;
  left:0;
  right:0;
  bottom:12%;
  height:26%;
  z-index:1;
  touch-action:pan-y;
}
.strings { display:block; width:100%; height:100%; overflow:visible; pointer-events:none; }
.strings path { fill:none; stroke:var(--paper); stroke-width:1; stroke-opacity:.62; vector-effect:non-scaling-stroke; }
.string-dot { position:absolute; left:28%; top:50%; translate:-50% -50%; width:44px; height:44px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:transparent; touch-action:pan-y; }
.string-dot span { display:block; width:12px; height:12px; border-radius:50%; background:#f43c2c; box-shadow:0 0 0 5px var(--blue); transition:scale 180ms ease; }
.string-dot:hover span { scale:1.25; }
.string-dot:focus-visible { outline:1px solid var(--paper); outline-offset:2px; }

.sdk-page .quote-screen { padding-bottom:12%; }
.sdk-page .quote-screen .section-heading,
.sdk-page .cto-statement { position:relative; z-index:2; }
.quote-screen .strings-art { bottom:3%; height:17%; }
.quote-screen .strings path { stroke-opacity:.35; }
.quote-screen .string-dot { left:66%; }

.sdk-page .network-copy { position:absolute; z-index:2; left:53%; top:9%; width:43%; padding:0; }
.sdk-page .network-copy h2 { font-size:clamp(46px,min(5.7vw,11dvh),108px); }
.sdk-page .network-priorities { font-size:clamp(18px,1.6vw,25px); max-width:510px; }
.sdk-page .network-screen .brand-mark { right:auto; left:-39%; bottom:-46%; width:min(88vw,116dvh); }
.network-screen .strings-art { bottom:7%; height:21%; }
.network-screen .string-dot { left:73%; }

@media (max-aspect-ratio:1/1) {
  .sdk-page #sdk { min-height:610px; }
  .sdk-page .hero-copy { top:5%; width:calc(100% - var(--gutter)*2); }
  .sdk-page h1 { font-size:clamp(68px,13.5vw,150px); }
  /* Keep the portrait composition, but cap artwork by height near square windows. */
  .sdk-page .brand-mark { width:min(125vw,74dvh); right:calc(12.5% - min(62.5vw,37dvh)); bottom:-36%; }
  .strings-art { bottom:13%; height:25%; }
  .string-dot { left:29%; }
  .sdk-page .quote-screen { padding-bottom:17%; }
  .sdk-page .network-screen { min-height:710px; }
  .sdk-page .network-copy { left:var(--gutter); top:5%; width:calc(100% - var(--gutter)*2); }
  .sdk-page .network-copy h2 { font-size:clamp(48px,8vw,86px); }
  .sdk-page .network-priorities { font-size:21px; margin-top:24px; max-width:530px; }
  .sdk-page .network-screen .brand-mark { width:min(125vw,84dvh); left:calc(7.5% - min(62.5vw,42dvh)); bottom:-49%; }
  .network-screen .strings-art { bottom:8%; height:21%; }
  .network-screen .string-dot { left:73%; }
}

@media (max-width:650px) {
  .sdk-page #sdk { min-height:510px; }
  .sdk-page .hero-copy { top:4%; }
  .sdk-page h1 { font-size:clamp(50px,13.8vw,88px); }
  .sdk-page .intro { font-size:19px; margin-top:23px; }
  .sdk-page .brand-mark { width:155vw; right:-64%; bottom:-28%; }
  .strings-art { bottom:11%; height:24%; }
  .string-dot span { width:10px; height:10px; }
  .sdk-page .quote-screen { min-height:640px; padding:32px 24px 140px; gap:28px; }
  .sdk-page .quote-screen .section-heading h2 { font-size:clamp(45px,12vw,70px); }
  .sdk-page .cto-statement blockquote { font-size:clamp(23px,6.4vw,30px); }
  .quote-screen .strings-art { height:100px; bottom:2%; }
  .sdk-page .network-screen { min-height:710px; }
  .sdk-page .network-copy h2 { font-size:clamp(36px,10.5vw,64px); }
  .sdk-page .network-priorities { font-size:18px; line-height:1.4; margin-top:22px; }
  .sdk-page .network-screen .brand-mark { width:145vw; left:-61%; bottom:-40%; }
  .network-screen .strings-art { height:21%; bottom:8%; }
}

/* Small, nearly square windows need the same clearance as larger portrait windows. */
@media (max-width:650px) and (min-aspect-ratio:3/4) and (max-aspect-ratio:1/1) {
  .sdk-page .brand-mark { width:min(155vw,64dvh); right:calc(13.5% - min(77.5vw,32dvh)); }
  .sdk-page .network-screen .brand-mark { width:min(145vw,84dvh); left:calc(11.5% - min(72.5vw,42dvh)); }
}

@media (prefers-reduced-motion:reduce) {
  .string-dot span { transition:none; }
}